/* EL RECORRIDO DE CINCO ESCENAS · CSS portado de makers-site -------------- Extraído por LAS 170 CLASES QUE EL COMPONENTE USA DE VERDAD, leídas del DOM vivo de makers-site — no por rangos de línea a ojo, que fue el primer error. TRES TRADUCCIONES, y ninguna es opcional: 1. LA UNIDAD. makers-site no usa raíz de 10px sino `html{font-size:.6944444444vw}`: su maqueta entera es PROPORCIONAL AL ANCHO DE VENTANA. Reescalar por un factor fijo no podía cuadrar. Cada `rem` de origen pasa aquí a `calc(N * var(--sys-u))`, con `--sys-u` reproduciendo esa fórmula. La raíz de makers-web (16px) no se toca. 2. EL ALCANCE. Cada selector va acotado a `#sistema` para que nombres genéricos —`.pant`, `.lz`, `.mk-eyebrow`— no se escapen al resto del sitio. 3. LOS COMENTARIOS, FUERA. Se eliminan ANTES de acotar. Si no, el comentario que precede a una regla se cuela en su selector y queda `#sistema (comentario) #sistema .x`, que con un id repetido no encaja nunca. Ese fue el fallo que dejaba las cinco escenas apiladas en vez de superpuestas: `.sysEsc` perdía su `position:absolute`. Los @keyframes van sin acotar: no se pueden anidar y sus nombres ya son propios del componente. */ #sistema { --sys-u: 0.6944444444vw; /* LOS TOKENS DE makers-site. Sin ellos el port parece funcionar y no funciona: reglas como `animation: sysEntra var(--mk-t-normal) var(--mk-in) forwards` usan estas variables, y un `var()` indefinido INVALIDA la declaración entera — el `animation-name` se queda en `none` y la pieza no aparece nunca. Era exactamente por esto que las filas de AUDITORÍA salían vacías. No se extraían antes porque el filtro busca clases y `:root` no tiene ninguna. Los rem de los propios tokens van también a la unidad fluida. El acento no se traduce: --mk-accent es #ff2d1a, igual que --ember. */ --app-height: 100%; --mk-accent: #ff2d1a; --mk-accent-soft: rgba(255,45,26,.34); --mk-amb: cubic-bezier(.4,0,.2,1); --mk-ease: cubic-bezier(.6,0,.2,1); --mk-in: cubic-bezier(.05,.7,.1,1); --mk-ink: #000000; --mk-line: rgba(255,255,255,.16); --mk-muted: rgba(255,255,255,.62); --mk-out: cubic-bezier(.3,0,1,1); --mk-paper: #ffffff; --mk-radius: calc(1.4 * var(--sys-u)); --mk-space-1: calc(.8 * var(--sys-u)); --mk-space-12: calc(9.6 * var(--sys-u)); --mk-space-16: calc(12.8 * var(--sys-u)); --mk-space-2: calc(1.6 * var(--sys-u)); --mk-space-3: calc(2.4 * var(--sys-u)); --mk-space-4: calc(3.2 * var(--sys-u)); --mk-space-6: calc(4.8 * var(--sys-u)); --mk-space-8: calc(6.4 * var(--sys-u)); --mk-t-lento: .52s; --mk-t-normal: .34s; --mk-t-rapido: .18s; --mk-trazo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M12,46 C120,18 240,12 360,20 C450,26 530,34 588,16' fill='none' stroke='%23ff2d1a' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E"); } @media screen and (orientation: portrait) and (max-width: 800px) { #sistema { --sys-u: 2.6666666667vw; } } /* El bloque llegó envuelto en `.mediaSentence__bottom`, cuyo ancho lo dan reglas de contenedor que quedan fuera del componente. Sin ellas, dentro de un plano `display:flex` se encogía a 424px. La proporción es la medida en el original: 1119 de 1366 de ventana. */ #sistema .esc__plano { display: block; } #sistema .mediaSentence__bottom { width: 100%; } #sistema .sys { width: 81.9%; margin-inline: auto; } #sistema.section { padding-block: 0; } #sistema .workCard__media img, #sistema .mediaCard img, #sistema .homeHeader__mediaCard img{ transition:transform .8s var(--mk-ease),filter .8s var(--mk-ease); will-change:transform; } #sistema .workCard:hover .workCard__media img, #sistema .homeHeader__mediaCard:hover img{transform:scale(1.05);} #sistema .mk-eyebrow{display:flex;align-items:center;gap:calc(1.1 * var(--sys-u));font-size:calc(1.3 * var(--sys-u));font-weight:400;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:var(--mk-space-2);} #sistema .mk-eyebrow::before{content:"";flex:0 0 auto;width:calc(2.6 * var(--sys-u));height:1px;background:currentColor;opacity:.55;} #sistema .workCard{position:relative;} @keyframes mkFlow{to{stroke-dashoffset:-13;}} @keyframes mkPulse{0%{transform:scale(1);opacity:.6;}70%,100%{transform:scale(1.5);opacity:0;}} #sistema .forces__text .mk-eyebrow{margin-bottom:calc(1.4 * var(--sys-u));} #sistema .workCard__media .mkScene{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden; background:radial-gradient(120% 80% at 50% 0,#1b1b1b 0,#0b0b0b 72%);display:flex;flex-direction:column;} #sistema .mkScene--chat{padding:calc(2.6 * var(--sys-u)) calc(2.2 * var(--sys-u));} #sistema .mkScene__bar{display:flex;align-items:center;gap:calc(1.2 * var(--sys-u));padding-bottom:calc(1.8 * var(--sys-u));margin-bottom:auto;border-bottom:1px solid var(--mk-line);} #sistema .mkScene__ava{width:calc(4.2 * var(--sys-u));height:calc(4.2 * var(--sys-u));border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid var(--mk-line);} #sistema .mkScene__ava svg{width:calc(2.5 * var(--sys-u));height:calc(2.5 * var(--sys-u));fill:#fff;} #sistema .mkScene__id{display:flex;flex-direction:column;line-height:1.2;margin-right:auto;} #sistema .mkScene__id b{font-size:calc(1.6 * var(--sys-u));font-weight:500;} #sistema .mkScene__id em{font-style:normal;font-size:calc(1.2 * var(--sys-u));opacity:.6;display:flex;align-items:center;gap:calc(.5 * var(--sys-u));} #sistema .mkDot{width:calc(.8 * var(--sys-u));height:calc(.8 * var(--sys-u));border-radius:50%;background:#fff;animation:mkPulseDot 1.9s ease-out infinite;} @keyframes mkPulseDot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 calc(.8 * var(--sys-u)) rgba(255,255,255,0)}} #sistema .mkScene__badge{font-size:calc(1.1 * var(--sys-u));font-weight:500;letter-spacing:.08em;padding:calc(.5 * var(--sys-u)) calc(1 * var(--sys-u));border-radius:100px;border:1px solid var(--mk-line);opacity:.85;white-space:nowrap;} #sistema .mkChat{display:flex;flex-direction:column;gap:calc(1.4 * var(--sys-u));justify-content:flex-end;padding-top:calc(2 * var(--sys-u));} #sistema .mkBub{max-width:84%;padding:calc(1.4 * var(--sys-u)) calc(1.7 * var(--sys-u));border-radius:calc(1.8 * var(--sys-u));font-size:calc(1.5 * var(--sys-u));line-height:1.35;} #sistema .mkBub p{margin:0;} #sistema .mkBub--in{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid var(--mk-line);border-bottom-left-radius:calc(.5 * var(--sys-u));} #sistema .mkBub--out{align-self:flex-end;background:#fff;color:#000;border-bottom-right-radius:calc(.5 * var(--sys-u));} #sistema .mkBub--typing{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid var(--mk-line);opacity:0;} #sistema .mkBub--cita{padding:calc(1.2 * var(--sys-u)) calc(1.4 * var(--sys-u));} #sistema .mkCita{display:flex;align-items:center;gap:calc(1.1 * var(--sys-u));} #sistema .mkCita>svg{width:calc(2.6 * var(--sys-u));height:calc(2.6 * var(--sys-u));fill:#000;flex:0 0 auto;} #sistema .mkCita__t{display:flex;flex-direction:column;line-height:1.2;} #sistema .mkCita__t b{font-size:calc(1.5 * var(--sys-u));font-weight:500;} #sistema .mkCita__t em{font-style:normal;font-size:calc(1.25 * var(--sys-u));opacity:.7;} #sistema .mkTyp{display:inline-flex;gap:calc(.5 * var(--sys-u));align-items:center;} #sistema .mkTyp i{width:calc(.8 * var(--sys-u));height:calc(.8 * var(--sys-u));border-radius:50%;background:rgba(255,255,255,.6);} @keyframes mkTypBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(calc(-.5 * var(--sys-u)));opacity:1}} @keyframes mkBubShow{0%,4%{opacity:0;transform:translateY(calc(1.4 * var(--sys-u)))}9%,100%{opacity:1;transform:none}} @keyframes mkTypeCycle{0%,20%{opacity:0}24%,40%{opacity:1}44%,100%{opacity:0}} @keyframes mkBubShow2{0%,46%{opacity:0;transform:translateY(calc(1.4 * var(--sys-u)))}52%,100%{opacity:1;transform:none}} @keyframes mkBubShow3{0%,66%{opacity:0;transform:translateY(calc(1.4 * var(--sys-u))) scale(.96)}73%,100%{opacity:1;transform:none}} #sistema .workCard:hover .mkBub--in, #sistema .workCard.mk-playing .mkBub--in{animation:mkBubShow 6s var(--mk-ease) infinite .2s;} #sistema .workCard:hover .mkBub--typing, #sistema .workCard.mk-playing .mkBub--typing{animation:mkTypeCycle 6s linear infinite;} #sistema .workCard:hover .mkBub--out:not(.mkBub--cita), #sistema .workCard.mk-playing .mkBub--out:not(.mkBub--cita){animation:mkBubShow2 6s var(--mk-ease) infinite;} #sistema .workCard:hover .mkBub--cita, #sistema .workCard.mk-playing .mkBub--cita{animation:mkBubShow3 6s var(--mk-ease) infinite;} #sistema .workCard:hover .mkTyp i, #sistema .workCard.mk-playing .mkTyp i{animation:mkTypBounce 1.2s ease-in-out infinite;} #sistema .workCard:hover .mkTyp i:nth-child(2), #sistema .workCard.mk-playing .mkTyp i:nth-child(2){animation-delay:.2s;} #sistema .workCard:hover .mkTyp i:nth-child(3), #sistema .workCard.mk-playing .mkTyp i:nth-child(3){animation-delay:.4s;} #sistema .mkScene--dash{padding:calc(2.6 * var(--sys-u)) calc(2.2 * var(--sys-u));} #sistema .mkScene--dash .mkScene__ava svg{width:calc(2.2 * var(--sys-u));height:calc(2.2 * var(--sys-u));} #sistema .mkDash{display:flex;flex-direction:column;gap:calc(1.6 * var(--sys-u));margin-top:calc(2 * var(--sys-u));flex:1;} #sistema .mkDash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1 * var(--sys-u));} #sistema .mkKpi{border:1px solid var(--mk-line);border-radius:calc(1.2 * var(--sys-u));background:rgba(255,255,255,.03);padding:calc(1.2 * var(--sys-u)) calc(.8 * var(--sys-u));text-align:center;} #sistema .mkKpi b{display:block;font-size:calc(2 * var(--sys-u));font-weight:500;letter-spacing:-.02em;line-height:1;} #sistema .mkKpi em{font-style:normal;font-size:calc(1.05 * var(--sys-u));opacity:.55;text-transform:uppercase;letter-spacing:.03em;} #sistema .mkChart{display:flex;align-items:flex-end;gap:calc(1 * var(--sys-u));height:calc(11 * var(--sys-u));padding:0 calc(.4 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(1.4 * var(--sys-u));background:rgba(255,255,255,.02);padding-top:calc(1.2 * var(--sys-u));} #sistema .mkBarcol{flex:1;height:var(--h);min-height:calc(.6 * var(--sys-u));border-radius:calc(.5 * var(--sys-u)) calc(.5 * var(--sys-u)) 0 0;background:linear-gradient(180deg,#fff,rgba(255,255,255,.5));transform-origin:bottom;transform:scaleY(1);} #sistema .mkPreview{display:flex;flex-wrap:wrap;align-items:center;gap:calc(.8 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(1.2 * var(--sys-u));background:rgba(255,255,255,.02);padding:calc(1.2 * var(--sys-u)) calc(1.4 * var(--sys-u));} #sistema .mkPreview__tag{font-size:calc(1.1 * var(--sys-u));font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.8;padding:calc(.3 * var(--sys-u)) calc(.8 * var(--sys-u));border:1px solid var(--mk-line);border-radius:100px;} #sistema .mkPreview__line{height:calc(.8 * var(--sys-u));border-radius:100px;background:rgba(255,255,255,.22);flex:1;min-width:calc(5 * var(--sys-u));} #sistema .mkPreview__line--short{flex:0 0 calc(4 * var(--sys-u));} #sistema .mkPreview__cta{width:100%;height:calc(2 * var(--sys-u));border-radius:calc(.7 * var(--sys-u));background:#fff;margin-top:calc(.3 * var(--sys-u));} #sistema .mkReport{display:flex;align-items:center;gap:calc(1.1 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(1.2 * var(--sys-u));background:rgba(255,255,255,.04);padding:calc(1.2 * var(--sys-u)) calc(1.4 * var(--sys-u));margin-top:auto;} #sistema .mkReport__ico{width:calc(3 * var(--sys-u));height:calc(3 * var(--sys-u));flex:0 0 auto;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;} #sistema .mkReport__ico svg{width:calc(1.8 * var(--sys-u));height:calc(1.8 * var(--sys-u));fill:#000;} #sistema .mkReport__t{display:flex;flex-direction:column;line-height:1.2;} #sistema .mkReport__t b{font-size:calc(1.5 * var(--sys-u));font-weight:500;} #sistema .mkReport__t em{font-style:normal;font-size:calc(1.2 * var(--sys-u));opacity:.6;} @keyframes mkBarWave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}} @keyframes mkCtaPulse{0%,100%{opacity:.85;transform:none}50%{opacity:1;transform:translateY(-1px)}} #sistema .workCard:hover .mkScene--dash .mkBarcol, #sistema .workCard.mk-playing .mkScene--dash .mkBarcol{animation:mkBarWave 2.6s var(--mk-ease) infinite;animation-delay:calc(var(--d,0)*.18s);} #sistema .workCard:hover .mkScene--dash .mkPreview__cta, #sistema .workCard.mk-playing .mkScene--dash .mkPreview__cta{animation:mkCtaPulse 2s var(--mk-ease) infinite;} #sistema .mkScene--shoot{padding:calc(2.6 * var(--sys-u)) calc(2.2 * var(--sys-u));} #sistema .mkDot--rec{background:var(--ember);} #sistema .mkShoot{display:flex;flex-direction:column;gap:calc(1.6 * var(--sys-u));margin-top:calc(2 * var(--sys-u));flex:1;} #sistema .mkShoot__frame{position:relative;flex:1;min-height:calc(15 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(1.4 * var(--sys-u));overflow:hidden; background:linear-gradient(135deg,#262626,#0e0e0e);display:flex;align-items:center;justify-content:center;} #sistema .mkShoot__grid{position:absolute;inset:0;opacity:.12; background:linear-gradient(#fff 1px,transparent 1px) 0 0/100% 33.3%,linear-gradient(90deg,#fff 1px,transparent 1px) 0 0/33.3% 100%;} #sistema .mkShoot__frame::before{content:"● REC";position:absolute;top:calc(1.1 * var(--sys-u));left:calc(1.3 * var(--sys-u));font-size:calc(1.1 * var(--sys-u));letter-spacing:.1em;color:var(--ember);font-weight:500;} #sistema .mkShoot__clips{position:absolute;inset:0;z-index:0;} #sistema .mkShoot__clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;} #sistema .mkShoot__clip:nth-child(1){opacity:1;} #sistema .mkShoot__subj{position:relative;z-index:2;display:inline-grid;font-size:calc(1.7 * var(--sys-u));font-weight:500;color:#fff;text-align:center; padding:calc(.8 * var(--sys-u)) calc(1.6 * var(--sys-u));border:1px solid rgba(255,255,255,.4);border-radius:100px;background:rgba(0,0,0,.55);} #sistema .mkShoot__subj span{grid-area:1/1;opacity:0;} #sistema .mkShoot__subj span:nth-child(1){opacity:1;} #sistema .mkShoot__dist{display:flex;gap:calc(.9 * var(--sys-u));} #sistema .mkShoot__piece{flex:1;height:calc(4.2 * var(--sys-u));border-radius:calc(.7 * var(--sys-u));border:1px solid var(--mk-line);background:rgba(255,255,255,.06);} #sistema .mkShoot__stats{display:flex;gap:calc(1 * var(--sys-u));} #sistema .mkStat{display:flex;align-items:center;gap:calc(.5 * var(--sys-u));font-size:calc(1.35 * var(--sys-u));font-weight:500;padding:calc(.7 * var(--sys-u)) calc(1.2 * var(--sys-u));border:1px solid var(--mk-line);border-radius:100px;} #sistema .mkStat svg{width:calc(1.6 * var(--sys-u));height:calc(1.6 * var(--sys-u));fill:#fff;} @keyframes mkShootFade{0%{opacity:0}2%{opacity:1}23%{opacity:1}27%{opacity:0}100%{opacity:0}} @keyframes mkPop{0%,8%{opacity:0;transform:scale(.6)}20%,100%{opacity:1;transform:none}} #sistema .workCard:hover .mkShoot__subj span, #sistema .workCard.mk-playing .mkShoot__subj span{animation:mkShootFade 8s var(--mk-ease) infinite;animation-delay:calc(var(--i,0)*-2s);} #sistema .workCard:hover .mkShoot__clip, #sistema .workCard.mk-playing .mkShoot__clip{animation:mkShootFade 8s var(--mk-ease) infinite;animation-delay:calc(var(--i,0)*-2s);} #sistema .workCard:hover .mkShoot__piece, #sistema .workCard.mk-playing .mkShoot__piece{animation:mkPop 3s var(--mk-ease) infinite;animation-delay:calc(var(--d,0)*.2s);} #sistema .mkScene--brand{padding:calc(2.6 * var(--sys-u)) calc(2.2 * var(--sys-u));} #sistema .mkBrand{display:flex;flex-direction:column;gap:calc(1.4 * var(--sys-u));margin-top:calc(2 * var(--sys-u));flex:1;} #sistema .mkBrand__logo{position:relative;height:calc(12 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(1.4 * var(--sys-u));background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;overflow:hidden;} #sistema .mkBrand__guides{position:absolute;inset:0;pointer-events:none;opacity:.6; background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.12) 50%,transparent calc(50% + .5px)), linear-gradient(0deg,transparent calc(50% - .5px),rgba(255,255,255,.12) 50%,transparent calc(50% + .5px)), radial-gradient(circle at 50% 50%,transparent calc(3.5 * var(--sys-u)),rgba(255,255,255,.1) calc(3.5 * var(--sys-u)),transparent calc(calc(3.5 * var(--sys-u)) + 1px));} #sistema .mkBrand__mark{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;} #sistema .mkBrand__mark svg{width:calc(6 * var(--sys-u));height:calc(6 * var(--sys-u));} #sistema .mkBrand__mark--final img{width:calc(6 * var(--sys-u));filter:brightness(0) invert(1);} #sistema .mkBrand__mark--sketch{opacity:0;} #sistema .mkBrand__tag{position:absolute;bottom:calc(.7 * var(--sys-u));right:calc(.9 * var(--sys-u));z-index:2;font-size:calc(1 * var(--sys-u));font-weight:500;letter-spacing:.09em; text-transform:uppercase;opacity:.55;background:rgba(0,0,0,.5);padding:calc(.25 * var(--sys-u)) calc(.7 * var(--sys-u));border-radius:100px;} #sistema .mkBrand__shots{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.7 * var(--sys-u));height:calc(6.4 * var(--sys-u));} #sistema .mkBrand__shots i{border-radius:calc(.8 * var(--sys-u));border:1px solid var(--mk-line);background-size:cover;background-position:center;background-repeat:no-repeat; filter:grayscale(1) contrast(1.05);opacity:.5;} #sistema .mkBrand__tag--shots{bottom:calc(.6 * var(--sys-u));right:calc(.6 * var(--sys-u));} #sistema .mkBrand__palette{display:flex;gap:calc(.8 * var(--sys-u));} #sistema .mkBrand__palette i{flex:1;height:calc(3 * var(--sys-u));border-radius:calc(.7 * var(--sys-u));background:var(--c);filter:saturate(.15) brightness(.9);opacity:.75;} #sistema .mkBrand__type{display:flex;align-items:center;gap:calc(1.2 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(1.2 * var(--sys-u));padding:calc(.9 * var(--sys-u)) calc(1.4 * var(--sys-u));} #sistema .mkBrand__type b{font-size:calc(2.6 * var(--sys-u));font-weight:500;line-height:1;} #sistema .mkBrand__typeTxt{font-size:calc(1.25 * var(--sys-u));opacity:.6;} #sistema .mkBrand__apps{display:flex;flex-wrap:wrap;gap:calc(.6 * var(--sys-u));} #sistema .mkBrand__apps span{font-size:calc(1.1 * var(--sys-u));font-weight:500;padding:calc(.5 * var(--sys-u)) calc(1 * var(--sys-u));border:1px solid var(--mk-line);border-radius:100px;opacity:.8;} #sistema .mkBrand__result{display:flex;align-items:center;gap:calc(.75 * var(--sys-u));margin-top:auto;padding-top:calc(1.2 * var(--sys-u));border-top:1px solid var(--mk-line); font-size:calc(1.4 * var(--sys-u));font-weight:500;line-height:1.2;} #sistema .mkBrand__resultDot{flex:0 0 auto;width:calc(1.4 * var(--sys-u));height:calc(1.4 * var(--sys-u));border-radius:50%;background:#fff;box-shadow:0 0 0 calc(.3 * var(--sys-u)) rgba(255,255,255,.12);} @keyframes mkSketch{0%{opacity:0}10%,45%{opacity:1}60%,100%{opacity:0}} @keyframes mkFinalIn{0%,55%{opacity:0;transform:scale(.9)}70%,100%{opacity:1;transform:none}} @keyframes mkColorize{0%,42%{filter:saturate(.15) brightness(.9);opacity:.5}72%,100%{filter:saturate(1) brightness(1);opacity:1}} #sistema .workCard:hover .mkBrand__mark--sketch, #sistema .workCard.mk-playing .mkBrand__mark--sketch{animation:mkSketch 5s var(--mk-ease) infinite;} #sistema .workCard:hover .mkBrand__mark--final, #sistema .workCard.mk-playing .mkBrand__mark--final{animation:mkFinalIn 5s var(--mk-ease) infinite;} #sistema .workCard:hover .mkBrand__palette i, #sistema .workCard.mk-playing .mkBrand__palette i{animation:mkColorize 5s var(--mk-ease) infinite;} #sistema .workCard:hover .mkBrand__palette i:nth-child(2), #sistema .workCard.mk-playing .mkBrand__palette i:nth-child(2){animation-delay:.08s;} #sistema .workCard:hover .mkBrand__palette i:nth-child(3), #sistema .workCard.mk-playing .mkBrand__palette i:nth-child(3){animation-delay:.16s;} #sistema .workCard:hover .mkBrand__palette i:nth-child(4), #sistema .workCard.mk-playing .mkBrand__palette i:nth-child(4){animation-delay:.24s;} #sistema .workCard:hover .mkBrand__palette i:nth-child(5), #sistema .workCard.mk-playing .mkBrand__palette i:nth-child(5){animation-delay:.32s;} @keyframes mkShotIn{0%,48%{opacity:.5;filter:grayscale(1) contrast(1.05)}70%,100%{opacity:1;filter:grayscale(0) contrast(1)}} #sistema .workCard:hover .mkBrand__shots i, #sistema .workCard.mk-playing .mkBrand__shots i{animation:mkShotIn 5s var(--mk-ease) infinite;} #sistema .workCard:hover .mkBrand__shots i:nth-child(2), #sistema .workCard.mk-playing .mkBrand__shots i:nth-child(2){animation-delay:.14s;} #sistema .workCard:hover .mkBrand__shots i:nth-child(3), #sistema .workCard.mk-playing .mkBrand__shots i:nth-child(3){animation-delay:.28s;} #sistema .mkScene--web{padding:calc(2.2 * var(--sys-u)) calc(1.8 * var(--sys-u));position:relative;} #sistema .mkBrowser{flex:1;display:flex;flex-direction:column;border:1px solid var(--mk-line);border-radius:calc(1.4 * var(--sys-u));overflow:hidden;background:#0f0f0f;} #sistema .mkBrowser__bar{display:flex;align-items:center;gap:calc(.6 * var(--sys-u));padding:calc(1 * var(--sys-u)) calc(1.2 * var(--sys-u));border-bottom:1px solid var(--mk-line);background:rgba(255,255,255,.03);} #sistema .mkBrowser__bar>i{width:calc(1 * var(--sys-u));height:calc(1 * var(--sys-u));border-radius:50%;background:rgba(255,255,255,.25);} #sistema .mkBrowser__url{margin-left:calc(1 * var(--sys-u));font-size:calc(1.2 * var(--sys-u));opacity:.6;background:rgba(255,255,255,.06);padding:calc(.4 * var(--sys-u)) calc(1 * var(--sys-u));border-radius:100px;} #sistema .mkBrowser__view{position:relative;flex:1;padding:calc(1.6 * var(--sys-u));display:flex;flex-direction:column;gap:calc(1.1 * var(--sys-u));} #sistema .mkWeb__block{border:1px solid var(--mk-line);border-radius:calc(1 * var(--sys-u));background:rgba(255,255,255,.03);} #sistema .mkWeb__block--hero{padding:calc(1.5 * var(--sys-u));display:flex;flex-direction:column;gap:calc(.5 * var(--sys-u));} #sistema .mkWeb__eyebrow{font-size:calc(1.05 * var(--sys-u));font-weight:500;letter-spacing:.09em;text-transform:uppercase;opacity:.6;} #sistema .mkWeb__block--hero b{font-size:calc(1.75 * var(--sys-u));font-weight:500;line-height:1.15;} #sistema .mkWeb__block--hero em{font-style:normal;font-size:calc(1.2 * var(--sys-u));opacity:.6;} #sistema .mkWeb__stats{display:flex;gap:calc(.8 * var(--sys-u));padding:calc(1.1 * var(--sys-u));} #sistema .mkWeb__stats i{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(.2 * var(--sys-u));} #sistema .mkWeb__stats b{font-size:calc(1.55 * var(--sys-u));font-weight:500;line-height:1;} #sistema .mkWeb__stats em{font-style:normal;font-size:calc(1 * var(--sys-u));opacity:.55;text-align:center;} #sistema .mkApp{position:absolute;right:calc(1.5 * var(--sys-u));bottom:calc(1.5 * var(--sys-u));width:calc(11.5 * var(--sys-u));z-index:5;display:flex;flex-direction:column;gap:calc(.8 * var(--sys-u)); padding:calc(1.1 * var(--sys-u)) calc(1 * var(--sys-u));border:1px solid rgba(255,255,255,.55);border-radius:calc(1.8 * var(--sys-u));background:#0b0b0b; box-shadow:0 calc(1.8 * var(--sys-u)) calc(4.5 * var(--sys-u)) rgba(0,0,0,.65);transform:rotate(3deg);} #sistema .mkApp__notch{width:calc(3.2 * var(--sys-u));height:calc(.5 * var(--sys-u));border-radius:100px;background:rgba(255,255,255,.25);align-self:center;} #sistema .mkApp__head{display:flex;align-items:baseline;justify-content:space-between;} #sistema .mkApp__head b{font-size:calc(1.4 * var(--sys-u));font-weight:500;} #sistema .mkApp__head em{font-style:normal;font-size:calc(1 * var(--sys-u));opacity:.55;} #sistema .mkApp__meals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(.55 * var(--sys-u));} #sistema .mkApp__meals li{display:flex;align-items:center;gap:calc(.6 * var(--sys-u));padding:calc(.55 * var(--sys-u)) calc(.65 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(.7 * var(--sys-u));background:rgba(255,255,255,.03);} #sistema .mkApp__dot{flex:0 0 auto;width:calc(.85 * var(--sys-u));height:calc(.85 * var(--sys-u));border-radius:50%;background:#fff;opacity:.5;} #sistema .mkApp__txt{flex:1;display:flex;flex-direction:column;line-height:1.15;min-width:0;} #sistema .mkApp__meals b{font-size:calc(1.1 * var(--sys-u));font-weight:500;} #sistema .mkApp__meals em{font-style:normal;font-size:calc(.92 * var(--sys-u));opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #sistema .mkApp__chk{flex:0 0 auto;width:calc(1.4 * var(--sys-u));height:calc(1.4 * var(--sys-u));border-radius:50%;border:1px solid rgba(255,255,255,.4);} #sistema .mkApp__macros{display:flex;gap:calc(.5 * var(--sys-u));} #sistema .mkApp__macros i{position:relative;flex:1;height:calc(.55 * var(--sys-u));border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden;} #sistema .mkApp__macros i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,60%);background:#fff;border-radius:100px;} @keyframes mkCheck{0%,32%{background:transparent;border-color:rgba(255,255,255,.4)}44%,100%{background:#fff;border-color:#fff}} #sistema .mkWeb__form{padding:calc(1.3 * var(--sys-u));display:flex;flex-direction:column;gap:calc(.9 * var(--sys-u));} #sistema .mkWeb__field{height:calc(2.5 * var(--sys-u));border-radius:calc(.6 * var(--sys-u));border:1px solid var(--mk-line);background:rgba(255,255,255,.02);position:relative;overflow:hidden;} #sistema .mkWeb__field::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(255,255,255,.14);} #sistema .mkWeb__btn{align-self:flex-start;background:#fff;color:#000;font-size:calc(1.25 * var(--sys-u));font-weight:500;padding:calc(.7 * var(--sys-u)) calc(1.4 * var(--sys-u));border-radius:100px;} #sistema .mkWeb__toast{position:absolute;left:calc(1.4 * var(--sys-u));bottom:calc(1.4 * var(--sys-u));background:#fff;color:#000;font-weight:500;font-size:calc(1.25 * var(--sys-u));padding:calc(.7 * var(--sys-u)) calc(1.1 * var(--sys-u));border-radius:calc(.8 * var(--sys-u));box-shadow:0 calc(1 * var(--sys-u)) calc(3 * var(--sys-u)) rgba(0,0,0,.5);z-index:6;} @keyframes mkAssemble{0%,6%{opacity:0;transform:translateY(calc(1.6 * var(--sys-u)))}16%,100%{opacity:1;transform:none}} @keyframes mkFill{0%,38%{width:0}56%,100%{width:100%}} @keyframes mkToast{0%,70%{opacity:0;transform:translateY(calc(1 * var(--sys-u)))}80%,95%{opacity:1;transform:none}100%{opacity:0}} #sistema .workCard:hover .mkWeb__block, #sistema .workCard.mk-playing .mkWeb__block{animation:mkAssemble 6.2s var(--mk-ease) infinite;} #sistema .workCard:hover .mkWeb__block:nth-child(2), #sistema .workCard.mk-playing .mkWeb__block:nth-child(2){animation-delay:.35s;} #sistema .workCard:hover .mkWeb__block:nth-child(3), #sistema .workCard.mk-playing .mkWeb__block:nth-child(3){animation-delay:.7s;} #sistema .mkWeb__field::after{width:0;} #sistema .workCard:hover .mkWeb__field::after, #sistema .workCard.mk-playing .mkWeb__field::after{animation:mkFill 6.2s var(--mk-ease) infinite;} #sistema .workCard:hover .mkWeb__field--b::after, #sistema .workCard.mk-playing .mkWeb__field--b::after{animation-delay:.4s;} #sistema .mkWeb__toast{opacity:0;} #sistema .workCard:hover .mkWeb__toast, #sistema .workCard.mk-playing .mkWeb__toast{animation:mkToast 6.2s var(--mk-ease) infinite;} #sistema .workCard:hover .mkApp__meals li, #sistema .workCard.mk-playing .mkApp__meals li{animation:mkAssemble 6.2s var(--mk-ease) infinite;animation-delay:calc(var(--d,0)*.35s);} #sistema .workCard:hover .mkApp__chk, #sistema .workCard.mk-playing .mkApp__chk{animation:mkCheck 6.2s var(--mk-ease) infinite;animation-delay:calc(var(--d,0)*.35s + .25s);} #sistema .mkScene--board{padding:calc(2.6 * var(--sys-u)) calc(2.2 * var(--sys-u));} #sistema .mkBoard{position:relative;flex:1;margin-top:calc(2 * var(--sys-u));min-height:calc(24 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(1.4 * var(--sys-u));overflow:hidden; background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/calc(2.2 * var(--sys-u)) calc(2.2 * var(--sys-u)),rgba(255,255,255,.02);} #sistema .mkNode{position:absolute;left:var(--x);top:var(--y);font-size:calc(1.2 * var(--sys-u));font-weight:500;padding:calc(.55 * var(--sys-u)) calc(.9 * var(--sys-u));border:1px solid var(--mk-line); border-radius:calc(.7 * var(--sys-u));background:rgba(18,18,18,.9);white-space:nowrap;z-index:2;} #sistema .mkNode--core{left:50%;top:50%;transform:translate(-50%,-50%);font-size:calc(1.45 * var(--sys-u));font-weight:500;border-color:#fff;background:#fff;color:#000;z-index:3;} @keyframes mkNodeIn{0%,8%{opacity:0;transform:translateY(calc(1 * var(--sys-u))) scale(.9)}20%,100%{opacity:1;transform:none}} #sistema .workCard:hover .mkNode:not(.mkNode--core), #sistema .workCard.mk-playing .mkNode:not(.mkNode--core){animation:mkNodeIn 5.5s var(--mk-ease) infinite;animation-delay:calc(var(--d,0)*.25s);} @keyframes mkHeroBubIn{0%,8%{opacity:0;transform:translateY(calc(1 * var(--sys-u)))}16%,100%{opacity:1;transform:none}} @keyframes mkStarIn{0%,8%{opacity:.22;transform:scale(.8)}22%,100%{opacity:1;transform:scale(1)}} @keyframes mkCalFill{0%,18%{background:rgba(255,255,255,.06)}34%,100%{background:rgba(255,255,255,.82)}} @keyframes mkSvcIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}} @keyframes mkSeamSew{to{stroke-dashoffset:0;}} #sistema main img:not(.mk-nobw):not(.mk-brand img):not(.arrowButton__arrow img):not(.forces__coreMark):not(.mkBrand__mark--final img){ filter:grayscale(1) contrast(1.03); transition:filter .55s cubic-bezier(.2,.7,.3,1); } #sistema main img:not(.mk-nobw):hover, #sistema .mk-gallery a:hover img, #sistema .mkc:hover .mkc__img img, #sistema .mk-bsys__card:hover .mk-bsys__tile img, #sistema .workCard:hover img, #sistema figure:hover > img{ filter:grayscale(0) contrast(1.03) saturate(1.06); } @keyframes mkTrazo{to{stroke-dashoffset:0}} @keyframes mkBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}} #sistema .mk-eyebrow::before{background:var(--mk-accent);opacity:1;} #sistema .mkDot, #sistema .mkDot--rec{background:var(--mk-accent);} @keyframes mkPulseDot{0%{box-shadow:0 0 0 0 rgba(255,45,26,.5)}70%,100%{box-shadow:0 0 0 calc(.8 * var(--sys-u)) rgba(255,45,26,0)}} #sistema .mkShoot__frame::before{color:var(--mk-accent);} #sistema .mkKpi{border-color:rgba(255,45,26,.22);} #sistema .sys{position:relative;} #sistema .sys__viaje{position:relative;} #sistema .sys--recorrido .sys__viaje{height:600vh;} #sistema .sys--recorrido .sys__ancla{position:sticky;top:0;height:100svh;overflow:hidden; display:grid;grid-template-rows:auto auto 1fr;align-items:stretch; padding:7vh 0 4vh;gap:2.2vh;} #sistema .sys__head{display:flex;align-items:baseline;justify-content:space-between;gap:calc(2 * var(--sys-u));flex-wrap:wrap;} #sistema .sys__head .mk-eyebrow{margin-bottom:0;} #sistema .sys__hint{font-size:calc(1.4 * var(--sys-u));opacity:.5;margin:0;} #sistema .sysRail{list-style:none;display:flex;gap:0;margin:0;padding:0;border-top:1px solid var(--mk-line);} #sistema .sysRail__p{flex:1 1 0;display:flex;align-items:baseline;gap:calc(.9 * var(--sys-u));padding:calc(1.2 * var(--sys-u)) 0 0; position:relative;opacity:.32;transition:opacity .45s var(--mk-ease);} #sistema .sysRail__p b{font-size:calc(1.3 * var(--sys-u));font-weight:500;letter-spacing:.06em;} #sistema .sysRail__p span{font-size:calc(1.45 * var(--sys-u));font-weight:500;} #sistema .sysRail__p::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:100%; background:var(--mk-accent);transform:scaleX(var(--llena,0));transform-origin:0 50%; transition:transform .2s linear;box-shadow:0 0 12px rgba(255,45,26,.7);} #sistema .sysRail__p.is-activa{opacity:1;} #sistema .sysRail__p.is-activa b{color:var(--mk-accent);} /* SE PROBÓ OCULTAR LAS ESCENAS DORMIDAS, Y NO SE QUEDA. ---------------------------------------------------- Las cinco escenas viven apiladas en el mismo hueco y sólo se esconden con `opacity: 0`: siguen en `display: flex` y `visibility: visible`, así que el navegador calcula estilos, maqueta y pinta 795 nodos que nadie puede ver. La cura evidente es `content-visibility: hidden` sobre las que no están activas, con `allow-discrete` para no cortar el fundido. Funcionaba: el fundido sobrevivía —comprobado muestreando las opacidades, en el cruce las dos escenas están visibles a la vez— y la geometría no se movía un píxel, porque son `position: absolute` y no aportan alto a nadie. PERO NO SE PUDO DEMOSTRAR QUE MEJORARA NADA. La primera medición dijo que sí —de 69-70 a 81-83 fps— y era mentira: estaba hecha en dos tandas seguidas, primero las de antes y luego las de después, así que lo que medía era el calentamiento del motor. Repetida en A/B intercalado, tres pasadas de cada una sobre la misma página y el mismo tramo: fps peor fotograma fotogramas lentos con ocultar 77 86 ms 22 sin ocultar 80 100 ms 16 Las dos series se solapan. Y encima esto sólo tocaría al ESCRITORIO, porque en móvil no hay recorrido: allí las escenas van apiladas y visibles. O sea que el sitio donde la CPU es escasa no lo aprovecharía. Un cambio que mete una propiedad discreta en una transición y esconde contenido de buscar-en-página, sin ganancia medible, no se queda. Si algún día el recorrido llega al móvil, esto es lo primero que hay que volver a probar — y entonces sí habrá algo que ganar. (También se probó `content-visibility: auto` para la versión apilada de móvil. Allí las escenas SÍ aportan alto, el tamaño de reserva no acierta, y la altura del documento se movía 1.268 px con las secciones cambiando de sitio. En una web coreografiada con el scroll eso es peor que el problema que venía a resolver.) */ #sistema .sys__escenas{position:relative;min-height:0;} /* CADA ESCENA SE CALCULA SOLA. ---------------------------- El lag de esta sección estaba localizado y era el cambio de escena. Medido con un observador de tareas largas y otro de mutaciones, correlacionando los dos en un barrido de y 2.000 a 6.000, las cuatro transiciones aparecen emparejadas una a una: cambia a la escena 1 en y 2.904 -> tarea larga de 112 ms en y 2.943 cambia a la escena 2 en y 3.695 -> tarea larga de 50 ms en y 3.752 cambia a la escena 3 en y 4.476 -> tarea larga de 52 ms en y 4.562 cambia a la escena 4 en y 5.257 -> tarea larga de 68 ms en y 5.295 Poner `.is-activa` desata un recálculo de estilo y una maquetación sobre un subárbol de hasta 224 nodos, y sin contención el navegador no puede dar por hecho que eso se queda dentro: tiene que considerar el resto del documento. `contain: layout style` se lo garantiza. Medido en A/B intercalado, cuatro pasadas de cada uno y repetido invirtiendo el orden por si el orden influía: fps suma de tareas largas con contención 76 ~358 ms sin contención 73 ~477 ms Un 25% menos de tiempo bloqueado, en la misma dirección las dos veces. NO LLEVA `paint` A PROPÓSITO: recortaría al borde de la caja, y en esta sección hay arte que se sale del suyo aposta —el anillo del agente, sin ir más lejos—. `layout style` no recorta nada. */ #sistema .sysEsc{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.4vh; contain:layout style; opacity:0;transform:translate3d(0,30px,0) scale(.99);pointer-events:none; transition:opacity var(--mk-t-normal) var(--mk-out), transform var(--mk-t-normal) var(--mk-out);} #sistema .sysEsc.is-activa{opacity:1;transform:none;pointer-events:auto; transition:opacity var(--mk-t-lento) var(--mk-in), transform var(--mk-t-lento) var(--mk-in);} #sistema .sysEsc.is-ida{transform:translate3d(0,-34px,0) scale(.985);} #sistema .esc__cab{flex:0 0 auto;max-width:calc(66 * var(--sys-u));position:relative;z-index:3;} #sistema .esc__quien{display:inline-flex;align-items:center;gap:calc(.7 * var(--sys-u));margin-bottom:calc(1 * var(--sys-u)); font-size:calc(1.15 * var(--sys-u));font-weight:400;letter-spacing:.16em;text-transform:uppercase; color:var(--mk-accent);} #sistema .esc__quien::before{content:"";width:calc(2.4 * var(--sys-u));height:1px;background:var(--mk-accent);} #sistema .esc__t{margin:0 0 calc(.8 * var(--sys-u));font-size:clamp(calc(3 * var(--sys-u)),3.9vw,calc(6.4 * var(--sys-u)));font-weight:400; letter-spacing:-.06em;line-height:.95;} #sistema .esc__d{margin:0;font-size:clamp(calc(1.5 * var(--sys-u)),1.35vw,calc(2.2 * var(--sys-u)));line-height:1.5; color:var(--mk-muted);max-width:calc(56 * var(--sys-u));} #sistema .esc__num{position:absolute;top:-4vh;right:-1vw;z-index:0;pointer-events:none; font-size:clamp(calc(16 * var(--sys-u)),23vw,calc(42 * var(--sys-u)));font-weight:400;line-height:.78;letter-spacing:-.05em; color:var(--mk-accent);opacity:.07;} #sistema .is-activa .esc__num{animation:escNum 1s var(--mk-ease) forwards;} #sistema .lz{position:relative;flex:1 1 auto;min-height:0;width:100%;z-index:2;} #sistema .is-activa .lz__pulso{opacity:1;animation:lzViaja 2.4s linear infinite; animation-delay:calc(var(--i,0) * .3s);} #sistema .is-activa .lz__pulso--vuelta{animation:lzViajaLargo 3.6s linear infinite; animation-delay:calc(var(--i,0) * 1.2s);} @keyframes lzViaja{from{stroke-dashoffset:1030}to{stroke-dashoffset:0}} @keyframes lzViajaLargo{from{stroke-dashoffset:2440}to{stroke-dashoffset:0}} @keyframes sysEntra{to{opacity:1;transform:none}} @keyframes sysEntraOp{to{opacity:1}} @keyframes lzLatido{0%{box-shadow:0 0 0 0 rgba(255,45,26,.55)}70%,100%{box-shadow:0 0 0 calc(1 * var(--sys-u)) rgba(255,45,26,0)}} #sistema .pant.workCard{display:block !important;width:100% !important;margin:0 !important; opacity:1 !important;position:relative;} /* La pantalla tampoco lleva marco: el vídeo que va dentro ya es una interfaz con su propio encuadre, así que el borde y el fondo sólo dibujaban una caja alrededor de una caja. El radio y el `overflow` se quedan — no son adorno, son lo que redondea las esquinas del vídeo. */ #sistema .pant__caja.workCard__media{height:100% !important;max-height:none !important; width:100%;margin:0 !important;border-radius:calc(1.4 * var(--sys-u));overflow:hidden; background:transparent !important; position:relative; display:flex;align-items:center;justify-content:center;} #sistema .pant__fit{width:calc(31.2 * var(--sys-u));height:calc(55.2 * var(--sys-u));flex:none;position:relative; transform:scale(var(--pant-s,1));transform-origin:center;} #sistema .pant__fit .mkScene{position:absolute;inset:0;} #sistema .lzK{font-size:calc(1.35 * var(--sys-u));font-weight:400;letter-spacing:.16em;text-transform:uppercase; opacity:.62;margin:0 0 calc(1.6 * var(--sys-u));display:flex;align-items:center;gap:calc(1.2 * var(--sys-u));} #sistema .lzVivo{display:inline-flex;align-items:center;gap:calc(.6 * var(--sys-u));font-size:calc(1.1 * var(--sys-u));letter-spacing:.06em; padding:calc(.35 * var(--sys-u)) calc(1 * var(--sys-u));border:1px solid var(--mk-accent-soft);border-radius:100px; color:var(--mk-accent);text-transform:none;} #sistema .lzVivo i{width:calc(.7 * var(--sys-u));height:calc(.7 * var(--sys-u));border-radius:50%;background:var(--mk-accent);} #sistema .is-activa .lzVivo i{animation:lzLatido 1.6s ease-out infinite;} /* LOS CUATRO PANELES VAN SIN MARCO — aquí, y en `.e1__plan`, `.e3__banco` y `.e4__panel`, que son los únicos cuatro bloques del recorrido que lo traían. Lo que había dentro ya venía con su propia caja —las filas de auditoría, las tarjetas del banco, las barras del panel—, así que el borde, el fondo y la sombra de este contenedor sólo dibujaban un cuadrado alrededor de otro cuadrado y el gráfico quedaba dos marcos adentro. Se va también el relleno: sin marco que respetar no separaba de nada, sólo encogía el gráfico. El ancho de columna y la posición no se tocan. Los que SÍ conservan su trazo son los que son el gráfico y no su envase: `.e4__agente` y `.e5__nucleo` (círculo y anillos), `.e2__visor` (el visor de cámara con sus esquinas). Ahí el borde no envuelve nada, dibuja. */ #sistema .e1__aud{position:absolute;left:0;top:0;width:32%;height:100%;overflow:hidden;} #sistema .e1__barrido{position:absolute;left:0;right:0;height:30%;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,45,26,.18),transparent);} #sistema .is-activa .e1__barrido{animation:e1Barre 3.4s linear infinite;} @keyframes e1Barre{from{top:-32%}to{top:104%}} #sistema .e1__filas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column; justify-content:space-between;height:calc(100% - calc(5 * var(--sys-u)));} #sistema .e1__filas li{display:flex;align-items:center;gap:calc(1.4 * var(--sys-u));padding:calc(1.6 * var(--sys-u)) calc(1.6 * var(--sys-u)); border:1px solid var(--mk-line);border-radius:calc(1.3 * var(--sys-u));background:rgba(255,255,255,.03); opacity:0;transform:translateY(12px);} #sistema .e1__filas svg{width:calc(2.8 * var(--sys-u));height:calc(2.8 * var(--sys-u));fill:var(--mk-accent);flex:none;} #sistema .e1__txt{display:flex;flex-direction:column;gap:calc(.2 * var(--sys-u));min-width:0;} #sistema .e1__txt b{font-size:calc(1.75 * var(--sys-u));font-weight:500;} #sistema .e1__txt em{font-style:normal;font-size:calc(1.3 * var(--sys-u));opacity:.6;} #sistema .e1__ok{margin-left:auto;width:calc(2.6 * var(--sys-u));height:calc(2.6 * var(--sys-u));border-radius:50%;flex:none; border:1px solid var(--mk-accent-soft);display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(.6);} #sistema .e1__ok svg{width:calc(1.5 * var(--sys-u)) !important;height:calc(1.5 * var(--sys-u)) !important;fill:var(--mk-accent);} #sistema .is-activa .e1__filas li{animation:sysEntra var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.06s + var(--i) * .08s);} #sistema .is-activa .e1__ok{animation:e1Marca var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.42s + var(--i) * .13s);} @keyframes e1Marca{to{opacity:1;transform:scale(1);background:rgba(255,45,26,.14)}} #sistema .e1__obj{position:absolute;left:36%;top:0;height:100%;width:31%; display:flex;flex-direction:column;gap:calc(1 * var(--sys-u));} #sistema .e1__obj .pant{flex:1 1 auto;min-height:0;} #sistema .e1__obj .pant__caja.workCard__media{height:100% !important;aspect-ratio:auto; border-color:var(--mk-accent-soft);box-shadow:0 0 70px rgba(255,45,26,.18);} #sistema .e1__obj__k{font-size:calc(1.2 * var(--sys-u));font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--mk-accent);text-align:center;} #sistema .e1__plan{position:absolute;right:0;top:50%;transform:translateY(-50%);width:28%;opacity:0;} #sistema .is-activa .e1__plan{animation:sysEntraOp var(--mk-t-lento) var(--mk-in) .86s forwards;} #sistema .e1__plan__k{display:flex;align-items:center;gap:calc(.8 * var(--sys-u));font-size:calc(1.2 * var(--sys-u));font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--mk-accent);margin-bottom:calc(1.4 * var(--sys-u));} #sistema .e1__plan__k svg{width:calc(2 * var(--sys-u));height:calc(2 * var(--sys-u));fill:var(--mk-accent);} #sistema .e1__hitos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(1 * var(--sys-u));} #sistema .e1__hitos li{display:flex;align-items:center;gap:calc(1 * var(--sys-u));font-size:calc(1.5 * var(--sys-u));font-weight:500; padding-left:calc(1.4 * var(--sys-u));position:relative;} #sistema .e1__hitos li::before{content:"";position:absolute;left:0;top:50%;width:calc(.7 * var(--sys-u));height:calc(.7 * var(--sys-u)); border-radius:50%;background:var(--mk-accent);transform:translateY(-50%);} #sistema .e1__hitos svg{width:calc(2.1 * var(--sys-u));height:calc(2.1 * var(--sys-u));fill:#fff;opacity:.85;} #sistema .e2__camara{position:absolute;left:0;top:0;width:41%;height:100%; display:flex;flex-direction:column;justify-content:center;gap:calc(1.6 * var(--sys-u));} #sistema .e2__visor{position:relative;aspect-ratio:16/9;border-radius:calc(1.8 * var(--sys-u));overflow:hidden; background:linear-gradient(135deg,#232323,#0a0a0a);border:1px solid var(--mk-line); display:flex;align-items:center;justify-content:center;box-shadow:0 30px 80px rgba(0,0,0,.6);} #sistema .e2__rec{position:absolute;top:calc(1.6 * var(--sys-u));left:calc(1.8 * var(--sys-u));display:flex;align-items:center;gap:calc(.7 * var(--sys-u)); font-size:calc(1.3 * var(--sys-u));font-weight:500;letter-spacing:.1em;color:var(--mk-accent);} #sistema .e2__rec i{width:calc(1 * var(--sys-u));height:calc(1 * var(--sys-u));border-radius:50%;background:var(--mk-accent);} #sistema .is-activa .e2__rec i{animation:e2Rec 1.4s steps(1) infinite;} @keyframes e2Rec{0%,50%{opacity:1}51%,100%{opacity:.15}} #sistema .e2__tc{position:absolute;top:calc(1.6 * var(--sys-u));right:calc(1.8 * var(--sys-u));font-size:calc(1.25 * var(--sys-u));opacity:.55; font-variant-numeric:tabular-nums;letter-spacing:.06em;} #sistema .e2__grid{position:absolute;inset:0;opacity:.1; background:linear-gradient(#fff 1px,transparent 1px) 0 0/100% 33.3%, linear-gradient(90deg,#fff 1px,transparent 1px) 0 0/33.3% 100%;} #sistema .e2__grid::after{content:"";position:absolute;left:0;right:0;height:26%; background:linear-gradient(180deg,transparent,rgba(255,45,26,.16),transparent);} #sistema .is-activa .e2__grid::after{animation:e2Escanea 4s linear infinite;} @keyframes e2Escanea{from{top:-30%}to{top:110%}} #sistema .e2__esq{position:absolute;width:calc(3 * var(--sys-u));height:calc(3 * var(--sys-u));border:2px solid rgba(255,255,255,.5);} #sistema .e2__esq--tl{top:calc(1.3 * var(--sys-u));left:calc(1.3 * var(--sys-u));border-right:0;border-bottom:0} #sistema .e2__esq--tr{top:calc(1.3 * var(--sys-u));right:calc(1.3 * var(--sys-u));border-left:0;border-bottom:0} #sistema .e2__esq--bl{bottom:calc(1.3 * var(--sys-u));left:calc(1.3 * var(--sys-u));border-right:0;border-top:0} #sistema .e2__esq--br{bottom:calc(1.3 * var(--sys-u));right:calc(1.3 * var(--sys-u));border-left:0;border-top:0} #sistema .e2__foco{position:absolute;width:38%;aspect-ratio:1;border:2px solid var(--mk-accent);border-radius:50%;} #sistema .is-activa .e2__foco{animation:e2Foco 2.8s var(--mk-ease) infinite;} @keyframes e2Foco{0%,100%{transform:scale(.78);opacity:.28}45%{transform:scale(1.08);opacity:1}} #sistema .e2__flash{position:absolute;inset:0;background:#fff;opacity:0;} #sistema .is-activa .e2__flash{animation:e2Flash 2.8s linear infinite;} @keyframes e2Flash{0%,44%{opacity:0}47%{opacity:.6}54%,100%{opacity:0}} #sistema .e2__sujeto{position:relative;z-index:2;font-size:calc(1.7 * var(--sys-u));font-weight:500;padding:calc(.9 * var(--sys-u)) calc(2 * var(--sys-u)); border-radius:100px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.34);} #sistema .e2__exp{display:flex;align-items:flex-end;gap:calc(.6 * var(--sys-u));height:calc(4 * var(--sys-u));flex:0 0 auto;} #sistema .e2__exp i{flex:1;background:var(--mk-accent);opacity:.5;height:30%;border-radius:3px;} #sistema .is-activa .e2__exp i{animation:e2Exp 1.4s var(--mk-ease) infinite;} #sistema .is-activa .e2__exp i:nth-child(2){animation-delay:.1s} #sistema .is-activa .e2__exp i:nth-child(3){animation-delay:.2s} #sistema .is-activa .e2__exp i:nth-child(4){animation-delay:.3s} #sistema .is-activa .e2__exp i:nth-child(5){animation-delay:.15s} #sistema .is-activa .e2__exp i:nth-child(6){animation-delay:.25s} #sistema .is-activa .e2__exp i:nth-child(7){animation-delay:.05s} #sistema .is-activa .e2__exp i:nth-child(8){animation-delay:.35s} @keyframes e2Exp{0%,100%{height:22%;opacity:.32}50%{height:100%;opacity:1}} #sistema .e2__salidas{position:absolute;left:0;right:0;top:0;height:100%;list-style:none;margin:0;padding:0; display:flex;gap:calc(2 * var(--sys-u));} #sistema .e2__salidas > li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(1.2 * var(--sys-u)); font-size:calc(1.7 * var(--sys-u));font-weight:500;text-align:center;opacity:0;transform:translateY(24px);} #sistema .e2__salidas .pant{flex:1 1 auto;min-height:0;} #sistema .e2__salidas .pant__caja.workCard__media{height:100% !important;aspect-ratio:auto;} #sistema .e2__salidas b{flex:0 0 auto;} #sistema .e2__camara{display:none;} #sistema .is-activa .e2__salidas > li{animation:sysEntra var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.1s + var(--i) * .1s);} #sistema .is-activa .mq--video b::after{content:"";display:block;height:100%;border-radius:2px; background:var(--mk-accent);animation:mqReproduce 3.2s linear infinite;} #sistema .is-activa .mq{animation:mqEntra var(--mk-t-normal) var(--mk-in) forwards;animation-delay:calc(.16s + var(--i) * .09s); opacity:0;transform:scale(.86);} #sistema .e3__banco{position:absolute;left:38%;top:50%;transform:translateY(-50%);width:24%;min-height:60%;} #sistema .e3__banco__k{display:flex;align-items:center;gap:calc(.8 * var(--sys-u));flex-wrap:wrap;margin:0 0 calc(1.4 * var(--sys-u));} #sistema .e3__banco__k svg{width:calc(2.6 * var(--sys-u));height:calc(2.6 * var(--sys-u));fill:var(--mk-accent);} #sistema .e3__banco__k b{font-size:calc(1.7 * var(--sys-u));font-weight:500;color:var(--mk-accent);} #sistema .e3__banco__k span{font-size:calc(1.1 * var(--sys-u));letter-spacing:.08em;opacity:.6;width:100%;} #sistema .e3__agentes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(.9 * var(--sys-u));} #sistema .e3__agentes li{position:relative;display:flex;align-items:center;gap:calc(1 * var(--sys-u));padding:calc(1.1 * var(--sys-u)) calc(1.2 * var(--sys-u)); border:1px solid var(--mk-line);border-radius:calc(1.1 * var(--sys-u));background:rgba(8,4,4,.7); opacity:0;transform:translateY(10px);} #sistema .e3__agentes svg{width:calc(2.2 * var(--sys-u));height:calc(2.2 * var(--sys-u));fill:var(--mk-accent);flex:none;} #sistema .e3__txt{display:flex;flex-direction:column;min-width:0;} #sistema .e3__txt b{font-size:calc(1.4 * var(--sys-u));font-weight:500;} #sistema .e3__txt em{font-style:normal;font-size:calc(1.15 * var(--sys-u));opacity:.6;} #sistema .e3__led{margin-left:auto;width:calc(.8 * var(--sys-u));height:calc(.8 * var(--sys-u));border-radius:50%;background:var(--mk-accent);flex:none;} #sistema .is-activa .e3__agentes li{animation:sysEntra var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.1s + var(--i) * .09s);} #sistema .is-activa .e3__led{animation:lzLatido 2s ease-out infinite;animation-delay:calc(var(--i) * .3s);} #sistema .e3__pub{position:absolute;left:0;top:0;height:100%;width:22%; display:flex;flex-direction:column;justify-content:center;} #sistema .e3__redes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(1.8 * var(--sys-u));} #sistema .e3__redes li{position:relative;display:flex;align-items:center;justify-content:center; width:calc(5.6 * var(--sys-u));height:calc(5.6 * var(--sys-u));border-radius:calc(1.4 * var(--sys-u));border:1px solid var(--mk-line); background:rgba(255,255,255,.035);opacity:.32;} #sistema .e3__redes svg{width:calc(2.8 * var(--sys-u));height:calc(2.8 * var(--sys-u));fill:#fff;} #sistema .e3__ok{position:absolute;top:calc(-.8 * var(--sys-u));right:calc(-.8 * var(--sys-u));width:calc(2.4 * var(--sys-u));height:calc(2.4 * var(--sys-u));border-radius:50%; background:var(--mk-accent);display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(.5);box-shadow:0 0 18px rgba(255,45,26,.7);} #sistema .e3__ok svg{width:calc(1.4 * var(--sys-u)) !important;height:calc(1.4 * var(--sys-u)) !important;fill:#fff;} #sistema .is-activa .e3__redes li{animation:e3Enciende 3.6s var(--mk-ease) infinite; animation-delay:calc(var(--i) * .38s);} #sistema .is-activa .e3__ok{animation:e3Marca 3.6s var(--mk-ease) infinite;animation-delay:calc(var(--i) * .38s);} @keyframes e3Enciende{0%,66%,100%{opacity:.3;border-color:var(--mk-line);transform:scale(1)} 14%{opacity:1;border-color:var(--mk-accent);transform:scale(1.12)}} @keyframes e3Marca{0%,8%,58%,100%{opacity:0;transform:scale(.5)}18%,46%{opacity:1;transform:scale(1)}} #sistema .e3__at{position:absolute;right:0;top:0;height:100%;width:32%; display:flex;flex-direction:column;justify-content:center;gap:calc(1.2 * var(--sys-u));} #sistema .e3__tarj{display:flex;align-items:center;gap:calc(1 * var(--sys-u));padding:calc(1.2 * var(--sys-u)) calc(1.5 * var(--sys-u)); border:1px solid var(--mk-accent-soft);border-radius:calc(1.2 * var(--sys-u));background:rgba(255,45,26,.08); font-size:calc(1.4 * var(--sys-u));font-weight:500;opacity:0;} #sistema .e3__tarj svg{width:calc(2.2 * var(--sys-u));height:calc(2.2 * var(--sys-u));fill:var(--mk-accent);flex:none;} #sistema .e3__tarj--res{border-color:var(--mk-line);background:rgba(255,255,255,.035);} #sistema .is-activa .e3__b--in{animation:sysEntra .4s var(--mk-ease) .4s forwards;} #sistema .is-activa .e3__b--esc{animation:e3Parpadea 5s linear .9s infinite;} #sistema .is-activa .e3__b--out{animation:sysEntra .4s var(--mk-ease) 1.7s forwards;} #sistema .is-activa .e3__tarj{animation:sysEntra var(--mk-t-normal) var(--mk-in) .62s forwards;} #sistema .is-activa .e3__tarj--res{animation-delay:.78s;} #sistema .is-activa .e3__b--esc i{animation:e3Bota 1.1s ease-in-out infinite;} #sistema .is-activa .e3__b--esc i:nth-child(2){animation-delay:.18s} #sistema .is-activa .e3__b--esc i:nth-child(3){animation-delay:.36s} @keyframes e3Parpadea{0%,14%{opacity:1}20%,100%{opacity:0}} @keyframes e3Bota{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(calc(-.5 * var(--sys-u)));opacity:1}} #sistema .e4__fuentes{position:absolute;left:0;top:0;height:100%;width:19%;list-style:none;margin:0;padding:0; display:flex;flex-direction:column;justify-content:space-around;} #sistema .e4__fuentes li{display:flex;align-items:center;gap:calc(1.2 * var(--sys-u));padding:calc(1.4 * var(--sys-u)) calc(1.6 * var(--sys-u)); border:1px solid var(--mk-line);border-radius:calc(1.3 * var(--sys-u));background:rgba(255,255,255,.03); font-size:calc(1.6 * var(--sys-u));font-weight:500;opacity:0;transform:translateX(-16px);} #sistema .e4__fuentes svg{width:calc(2.6 * var(--sys-u));height:calc(2.6 * var(--sys-u));fill:var(--mk-accent);flex:none;} #sistema .is-activa .e4__fuentes li{animation:sysEntra var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.06s + var(--i) * .09s);} #sistema .e4__agente{position:absolute;left:36%;top:50%;transform:translate(-50%,-50%);width:16%; aspect-ratio:1;border-radius:50%;border:2px solid var(--mk-accent); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.6 * var(--sys-u)); text-align:center;padding:calc(1.4 * var(--sys-u));background:radial-gradient(circle,rgba(255,45,26,.18),transparent 66%);} #sistema .e4__agente svg{width:calc(3.4 * var(--sys-u));height:calc(3.4 * var(--sys-u));fill:#fff;} #sistema .e4__agente b{font-size:calc(1.35 * var(--sys-u));font-weight:500;line-height:1.25;} #sistema .e4__anillo{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,45,26,.5);} #sistema .is-activa .e4__anillo{animation:e4Pulso 3s var(--mk-ease) infinite;} #sistema .is-activa .e4__anillo:nth-of-type(2){animation-delay:1.5s} @keyframes e4Pulso{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.6);opacity:0}} /* EL PANEL, EN DOS COLUMNAS. Antes era una columna apilada —rótulo, cifras, cuadro de mando— y no cabía: el mock mide 972 px de alto natural dentro de un panel de 512, así que se lo quedaba todo y la rejilla, con `min-height:0`, se encogía hasta CERO. Sus ocho tarjetas seguían pintándose fuera de flujo, pisadas por el vídeo. (El original de makers-site tiene el mismo fallo: le falta la línea `.pant{flex:1 1 auto;min-height:0}` que sí escribieron para `.e1__obj` y `.e2__salidas`.) Apilarlos no tenía arreglo bueno: el mock es vertical y la caja que le quedaba debajo era ancha y baja, así que salía un sello de 136 px. Al lado ocupa el alto entero del panel, que es su forma, y se lee. `minmax(0,1fr)` en la segunda fila, no `1fr` a secas: sin el mínimo en 0 el alto natural del mock volvería a estirar la fila y estaríamos igual. */ #sistema .e4__panel{position:absolute;right:0;top:0;height:100%;width:41%; display:grid;grid-template-columns:1fr calc(15 * var(--sys-u)); grid-template-rows:auto minmax(0,1fr);column-gap:calc(1.6 * var(--sys-u));} #sistema .e4__panel .lzK{grid-column:1 / -1;} #sistema .e4__panel .pant{grid-column:2;grid-row:2;min-height:0;} /* EL REPARTO VERTICAL DEL PANEL, que estaba invertido y por eso las ocho cifras salían pisadas por el cuadro de mando. La rejilla pedía el hueco sobrante (`flex:1 1 auto`) y la pantalla no tenía techo: el mock mide 981 px de alto natural dentro de un panel de 512, así que se quedaba con todo, y la rejilla —con `min-height:0`— se encogía hasta CERO. Sus ocho tarjetas seguían pintándose, ya fuera de flujo, justo debajo del vídeo. Se invierte el reparto: las cifras ocupan lo que miden y la pantalla se queda con lo que sobre. No hay recorte — `ajusta()` en `sistema-recorrido.js` ya escala el mock a la caja que le toque, que es para lo que existe. */ #sistema .e4__rej{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr); grid-auto-rows:auto;align-content:start;gap:calc(.9 * var(--sys-u));grid-column:1;grid-row:2;} /* La tarjeta va más compacta que en el original: 181 px de alto no caben dos veces en un panel de 512 junto al cuadro de mando. Se recorta el aire —relleno vertical, alto de la barrita y sus márgenes—, nunca el contenido: la cifra, el rótulo y el sparkline siguen los tres enteros. */ #sistema .e4__rej li{position:relative;padding:calc(.85 * var(--sys-u)) calc(1.2 * var(--sys-u)) calc(.95 * var(--sys-u));border:1px solid var(--mk-line); border-radius:calc(1.2 * var(--sys-u));background:rgba(8,4,4,.72);overflow:hidden; display:flex;flex-direction:column;justify-content:center; opacity:0;transform:translateY(14px);} #sistema .e4__rej b{display:block;font-size:calc(2.2 * var(--sys-u));font-weight:500;line-height:1; letter-spacing:-.03em;font-variant-numeric:tabular-nums;} #sistema .e4__rej em{font-style:normal;font-size:calc(1.05 * var(--sys-u));opacity:.55;text-transform:uppercase; letter-spacing:.08em;margin-top:calc(.25 * var(--sys-u));} #sistema .e4__spark{display:flex;align-items:flex-end;gap:calc(.25 * var(--sys-u));height:calc(1.05 * var(--sys-u));margin-top:calc(.45 * var(--sys-u));} #sistema .e4__spark i{flex:1;background:var(--mk-accent);opacity:.3;border-radius:2px;height:20%;} #sistema .is-activa .e4__spark i{animation:e4Sube 1.8s var(--mk-ease) infinite alternate;} #sistema .is-activa .e4__spark i:nth-child(2){animation-delay:.12s} #sistema .is-activa .e4__spark i:nth-child(3){animation-delay:.24s} #sistema .is-activa .e4__spark i:nth-child(4){animation-delay:.36s} #sistema .is-activa .e4__spark i:nth-child(5){animation-delay:.48s} #sistema .is-activa .e4__spark i:nth-child(6){animation-delay:.6s} #sistema .is-activa .e4__spark i:nth-child(7){animation-delay:.72s} @keyframes e4Sube{from{height:16%;opacity:.26}to{height:92%;opacity:.95}} #sistema .e4__barra{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--mk-accent); transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 12px rgba(255,45,26,.8);} #sistema .is-activa .e4__rej li{animation:sysEntra var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.34s + var(--i) * .04s);} #sistema .is-activa .e4__barra{animation:e4Llena 1.1s var(--mk-amb) forwards; animation-delay:calc(.44s + var(--i) * .04s);} @keyframes e4Llena{to{transform:scaleX(1)}} /* LA ÓRBITA, ELÍPTICA. Era un círculo de 416 px y por ahí no caben cinco fases de hasta 203 px de ancho más diez canales: se contaron 15 pares de etiquetas encima unas de otras. El sitio sobraba, pero a lo ancho: el bloque mide 2.084 × 562, así que el círculo desperdiciaba toda la horizontal. Estirada a elipse —el mismo 74% de alto, 80u de ancho—, las etiquetas se separan sin encoger las fases. El 74% de alto NO es heredado sin pensar: es el techo. Abajo del todo hay un canal a --y:87.5%, y por debajo empiezan las tarjetas de «vuelta»; más alto y la órbita se les echa encima. `--x`/`--y` de cada etiqueta son porcentajes de esta caja, así que la elipse sale sola. Lo que NO sale solo son los aros y los radios del SVG: van con `preserveAspectRatio="none"` en el HTML para que se estiren igual — con el valor por defecto seguirían siendo un círculo centrado y las etiquetas orbitarían por fuera de su propio aro. `min(100%, …)` para que en móvil, donde `--sys-u` es cuatro veces mayor, no pida 197vw de ancho. */ #sistema .e5__eco{position:absolute;left:50%;top:0;transform:translateX(-50%); height:74%;width:min(100%, calc(80 * var(--sys-u)));} /* `> svg`, no `svg` a secas: esta regla es para EL ARO de la órbita, que es hijo directo. Sin el `>` atrapaba también el icono de cada canal y el del núcleo —nietos— y los sacaba de flujo contra la esquina de su pastilla: los diez canales pintaban el icono encima de su propio texto, 16 px exactos, y el cerebro de «La IA» salía despegado del rótulo. */ #sistema .e5__eco > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;} #sistema .is-activa .e5__orb{animation:e5Gira 60s linear infinite;transform-origin:50% 50%;} #sistema .is-activa .e5__orb--ext{animation-duration:90s;animation-direction:reverse;} @keyframes e5Gira{to{transform:rotate(360deg)}} #sistema .is-activa .e5__flujo{opacity:1;animation:e5Fluye 2.6s linear infinite; animation-delay:calc(var(--i) * .5s);} @keyframes e5Fluye{from{stroke-dashoffset:276}to{stroke-dashoffset:0}} /* El núcleo se mide contra el ALTO, no contra el ancho. Con `width:27%` crecía con la caja: al pasar la órbita a elipse el círculo se fue de 112 a 384 px y se tragaba media órbita, con los canales de arriba y abajo por dentro. El eje estrecho de la elipse es el vertical y es el que manda: 46% del alto lo deja justo dentro del aro interior, que es donde orbitan las fases. */ #sistema .e5__nucleo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); height:46%;width:auto;aspect-ratio:1;border-radius:50%;border:2px solid var(--mk-accent); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.2 * var(--sys-u)); text-align:center;background:radial-gradient(circle,rgba(255,45,26,.24),rgba(8,4,4,.96) 70%); z-index:3;} #sistema .e5__nucleo svg{width:calc(3.4 * var(--sys-u));height:calc(3.4 * var(--sys-u));fill:#fff;} /* El rótulo se mide contra el círculo, que ahora va atado al alto de la elipse y es más pequeño: a 1,1u «aprende cada vuelta» cruzaba el aro por abajo. */ #sistema .e5__nucleo b{font-size:calc(1.35 * var(--sys-u));font-weight:500;line-height:1.1;} #sistema .e5__nucleo em{font-style:normal;font-size:calc(.85 * var(--sys-u));opacity:.6;} #sistema .e5__halo{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,45,26,.55);} #sistema .is-activa .e5__halo{animation:e5Late 3.2s var(--mk-amb) infinite;} #sistema .is-activa .e5__halo:nth-of-type(2){animation-delay:1.6s;} @keyframes e5Late{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.7);opacity:0}} #sistema .e5__f{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); display:flex;align-items:center;gap:calc(.55 * var(--sys-u));padding:calc(.75 * var(--sys-u)) calc(1.3 * var(--sys-u));border-radius:100px; border:1px solid var(--mk-accent-soft);background:rgba(8,4,4,.95);white-space:nowrap; color:#fff;font:inherit;cursor:pointer;opacity:0;z-index:4; transition:border-color .3s var(--mk-amb),box-shadow .3s var(--mk-amb), transform .3s var(--mk-in);} #sistema .e5__f b{font-size:calc(1.05 * var(--sys-u));font-weight:500;color:var(--mk-accent);letter-spacing:.06em;} #sistema .e5__f em{font-style:normal;font-size:calc(1.25 * var(--sys-u));font-weight:500;} /* `sysEntraOp` (sólo opacidad), NO `sysEntra`: ésta acaba en `transform:none` y eso borra el `translate(-50%,-50%)` que centra la pastilla sobre su punto de la órbita. Cada fase quedaba media anchura a la derecha y media altura abajo —unos 100 × 28 px— y las cinco se escoraban al centro hasta pisarse. El fallo no se ve en el resto de la web porque ahí `sysEntra` anima desde un `translateY(14px)` hasta su sitio, que es para lo que está. Aquí la posición de partida YA es la buena: lo único que tiene que entrar es la opacidad. Los canales nunca lo sufrieron: tienen su propio `e5Canal`, que sí conserva el centrado. */ #sistema .is-activa .e5__f{animation:sysEntraOp var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.14s + var(--i) * .07s);} #sistema .e5__f:hover, #sistema .e5__f:focus-visible{border-color:var(--mk-accent);outline:none; box-shadow:0 0 26px rgba(255,45,26,.55); transform:translate(-50%,-50%) scale(1.08);} /* El canal encoge y la fase no: en esta escena la fase es lo que se lee y el canal es dónde aterriza. Con los dos a su tamaño original quedaban dos pares pisándose aun con la elipse. */ #sistema .e5__c{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); display:flex;align-items:center;gap:calc(.6 * var(--sys-u));opacity:0;z-index:2; padding:calc(.4 * var(--sys-u)) calc(.7 * var(--sys-u));border-radius:calc(.9 * var(--sys-u));background:rgba(6,4,4,.94); border:1px solid var(--mk-line);white-space:nowrap; transition:opacity .3s var(--mk-amb),transform .3s var(--mk-in),border-color .3s var(--mk-amb);} #sistema .e5__c svg{width:calc(1.6 * var(--sys-u));height:calc(1.6 * var(--sys-u));fill:#fff;opacity:.8;flex:none;} #sistema .e5__c em{font-style:normal;font-size:calc(1.05 * var(--sys-u));font-weight:500;opacity:.85;} #sistema .is-activa .e5__c{animation:e5Canal var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.34s + var(--i) * .05s);} @keyframes e5Canal{to{opacity:.85;transform:translate(-50%,-50%)}} #sistema .e5__eco:has(.e5__f:hover) .e5__radio, #sistema .e5__eco:has(.e5__f:focus-visible) .e5__radio{opacity:.12;} #sistema .e5__eco:has(.e5__f:hover) .e5__c, #sistema .e5__eco:has(.e5__f:focus-visible) .e5__c{opacity:.2;} #sistema .e5__eco:has(.e5__f[data-r="0"]:hover) [data-r="0"], #sistema .e5__eco:has(.e5__f[data-r="1"]:hover) [data-r="1"], #sistema .e5__eco:has(.e5__f[data-r="2"]:hover) [data-r="2"], #sistema .e5__eco:has(.e5__f[data-r="3"]:hover) [data-r="3"], #sistema .e5__eco:has(.e5__f[data-r="4"]:hover) [data-r="4"], #sistema .e5__eco:has(.e5__f[data-r="0"]:focus-visible) [data-r="0"], #sistema .e5__eco:has(.e5__f[data-r="1"]:focus-visible) [data-r="1"], #sistema .e5__eco:has(.e5__f[data-r="2"]:focus-visible) [data-r="2"], #sistema .e5__eco:has(.e5__f[data-r="3"]:focus-visible) [data-r="3"], #sistema .e5__eco:has(.e5__f[data-r="4"]:focus-visible) [data-r="4"]{ opacity:1 !important;stroke:var(--mk-accent);} #sistema .e5__ej{position:absolute;left:0;bottom:calc(26% + calc(1 * var(--sys-u)));margin:0; font-size:calc(1.15 * var(--sys-u));font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.5;} #sistema .e5__vueltas{position:absolute;left:0;right:0;bottom:0;width:100%; list-style:none;margin:0;padding:0;display:flex;gap:calc(1.4 * var(--sys-u));} #sistema .e5__vueltas li{flex:1 1 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:calc(1.2 * var(--sys-u));padding:calc(1.4 * var(--sys-u)) calc(1.6 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(1.4 * var(--sys-u)); background:rgba(255,255,255,.03);opacity:0;transform:translateX(-20px); box-shadow:0 16px 40px rgba(0,0,0,.4); transition:border-color .3s var(--mk-amb),transform .3s var(--mk-in);} #sistema .e5__vueltas li:hover{border-color:var(--mk-accent-soft);transform:translateY(-6px);} #sistema .e5__vueltas li:last-child{border-color:var(--mk-accent-soft);background:rgba(255,45,26,.06);} #sistema .e5__v__k{font-size:calc(1.1 * var(--sys-u));font-weight:500;letter-spacing:.12em;text-transform:uppercase; color:var(--mk-accent);} #sistema .e5__v__barras{display:flex;align-items:flex-end;gap:calc(.4 * var(--sys-u));height:calc(3.4 * var(--sys-u));} #sistema .e5__v__barras i{width:calc(.9 * var(--sys-u));background:var(--mk-accent);opacity:.55;border-radius:2px;height:8%;} #sistema .is-activa .e5__v__barras i{animation:e5Crece .5s var(--mk-in) forwards; animation-delay:calc(.3s + var(--i) * .12s);} @keyframes e5Crece{to{height:var(--h);opacity:.95}} #sistema .e5__vueltas b{grid-column:2;grid-row:2;font-size:calc(1.6 * var(--sys-u));font-weight:500;} #sistema .e5__vueltas em{grid-column:1/-1;grid-row:2;font-style:normal;font-size:calc(1.25 * var(--sys-u));opacity:.62; text-align:right;} #sistema .is-activa .e5__vueltas li{animation:sysEntra var(--mk-t-normal) var(--mk-in) forwards; animation-delay:calc(.16s + var(--i) * .1s);} #sistema .e5__pie{position:absolute;right:0;bottom:calc(26% + calc(1 * var(--sys-u)));margin:0;text-align:right; font-size:calc(1.45 * var(--sys-u));opacity:0;display:flex;align-items:center;justify-content:center;gap:calc(.8 * var(--sys-u));} #sistema .is-activa .e5__pie{animation:sysEntraOp var(--mk-t-lento) var(--mk-in) .62s forwards;} #sistema .is-activa .e5__chispa{animation:e5Brilla 2.6s var(--mk-amb) infinite;} @keyframes e5Brilla{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}} #sistema .sys:not(.sys--recorrido) .e1__filas li, #sistema .sys:not(.sys--recorrido) .e1__ok, #sistema .sys:not(.sys--recorrido) .e1__plan, #sistema .sys:not(.sys--recorrido) .e2__salidas > li, #sistema .sys:not(.sys--recorrido) .mq, #sistema .sys:not(.sys--recorrido) .e3__agentes li, #sistema .sys:not(.sys--recorrido) .e3__b, #sistema .sys:not(.sys--recorrido) .e3__tarj, #sistema .sys:not(.sys--recorrido) .e3__ok, #sistema .sys:not(.sys--recorrido) .e4__fuentes li, #sistema .sys:not(.sys--recorrido) .e4__rej li, #sistema .sys:not(.sys--recorrido) .e5__pasos li, #sistema .sys:not(.sys--recorrido) .e5__ciclo{opacity:1 !important;transform:none !important;} #sistema .sys:not(.sys--recorrido) .e3__b--esc, #sistema .sys:not(.sys--recorrido) .e2__flash, #sistema .sys:not(.sys--recorrido) .e1__barrido{display:none;} #sistema .sys:not(.sys--recorrido) .e3__redes li{opacity:1;} #sistema .sys:not(.sys--recorrido) .e4__barra{transform:scaleX(1);} #sistema .sys:not(.sys--recorrido) .sys__escenas{display:flex;flex-direction:column;gap:calc(7 * var(--sys-u));} #sistema .sys:not(.sys--recorrido) .sysEsc{position:static;opacity:1;transform:none;pointer-events:auto;} #sistema .sys:not(.sys--recorrido) .lz{height:auto;min-height:calc(56 * var(--sys-u));} #sistema .sys:not(.sys--recorrido) .sysRail{display:none;} #sistema .sys:not(.sys--recorrido) .esc__num{display:none;} @media(max-width:960px){ #sistema .lz{height:auto;min-height:0;} #sistema .e1__aud, #sistema .e1__obj, #sistema .e1__plan, #sistema .e2__camara, #sistema .e2__salidas, #sistema .e3__pub, #sistema .e3__banco, #sistema .e3__at, #sistema .e4__fuentes, #sistema .e4__agente, #sistema .e4__panel, #sistema .e5__pasos, #sistema .e5__ciclo{ position:static;width:100%;transform:none;height:auto;} #sistema .e1__obj, #sistema .e4__agente{aspect-ratio:1;max-width:calc(22 * var(--sys-u));margin:calc(1.6 * var(--sys-u)) auto;} /* EL ANILLO SE HABÍA ESCAPADO DEL AGENTE. Los dos anillos que orbitan el agente son `position: absolute; inset: 0` dentro de él, así que miden lo que mida el agente... mientras el agente sea un bloque posicionado. La regla de arriba lo pasa a `static` para sacarlo del plano del recorrido, y ahí los anillos se quedan sin ancla: suben al primer antepasado posicionado, que es el escenario entero, y con `inset: 0` se estiran a todo lo que mide. Medido a 375 px: el anillo salía de 335 x 772 px. O sea una elipse enorme que empezaba por encima de los chips de fuentes, cruzaba el agente y bajaba hasta partir en dos las tarjetas del cuadro de mando. Es lo que Angello vio en la captura, y no era un círculo mal escalado: era un círculo que no sabía ya a qué pertenecía. `relative` le devuelve el ancla sin sacarlo del flujo. Y `inset: auto` va con ello a la fuerza: el agente conserva del plano de escritorio sus coordenadas `left`/`top`, que en `static` se ignoran pero en `relative` vuelven a contar — sin esto el agente se iba 121 px a la derecha y salía medio fuera de la pantalla. Comprobado: anillo de 249 x 249 sobre un agente de 253, centrado. Barrido el resto de la sección en busca del mismo patrón —absolutos cuya ancla no es su padre y que miden más que él— a lo largo de todo el scroll: no hay ningún otro. */ #sistema .e4__agente{position:relative;inset:auto;} #sistema .e1__filas{height:auto;gap:calc(1 * var(--sys-u));} #sistema .e2__salidas, #sistema .e1__plan, #sistema .e3__banco, #sistema .e3__at, #sistema .e4__panel{margin-top:calc(1.8 * var(--sys-u));} #sistema .e3__redes{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:calc(1 * var(--sys-u));} #sistema .e4__panel{display:flex;flex-direction:column;} #sistema .e4__rej{grid-template-columns:repeat(2,1fr);} #sistema .e4__fuentes{flex-direction:row;gap:calc(1 * var(--sys-u));} } #sistema .mkNode{border-color:var(--mk-accent-soft);} #sistema .mkBarcol{background:linear-gradient(180deg,var(--mk-accent),rgba(255,45,26,.45)) !important;} #sistema .mkScene__badge{border-color:var(--mk-accent-soft);color:var(--mk-accent);} #sistema .mkReport{border-color:var(--mk-accent-soft);background:rgba(255,45,26,.07);} #sistema .mkReport__ico{background:var(--mk-accent);} #sistema .mkReport__ico svg{fill:#fff;} #sistema .mkBrand__tag, #sistema .mkBrand__result{color:var(--mk-accent);} #sistema .mkBrand__resultDot{background:var(--mk-accent);} #sistema .mkWeb__toast{border-color:var(--mk-accent-soft);} #sistema .mkShoot__stats b, #sistema .mkStat b{color:var(--mk-accent);} #sistema .pant .mkScene{background:radial-gradient(120% 80% at 50% 0,#0d0a0a 0,#060404 72%) !important;} #sistema .pant .mkShoot__frame{background:linear-gradient(135deg,#141010,#070505) !important;} #sistema .pant .mkBrowser{background:#0a0707 !important;} #sistema .pant .mkApp{background:#0a0707 !important;} #sistema .pant .mkBub--out{background:rgba(255,45,26,.16) !important;color:#fff !important; border:1px solid var(--mk-accent-soft);} #sistema .pant .mkBub--out b, #sistema .pant .mkBub--out strong{color:#fff;} #sistema .pant .mkBub--cita{background:rgba(255,45,26,.12) !important;border:1px solid var(--mk-accent);} #sistema .pant .mkCita>svg{fill:var(--mk-accent) !important;} #sistema .pant .mkCita__t b, #sistema .pant .mkCita__t em{color:#fff !important;} #sistema .pant .mkPreview__cta{background:var(--mk-accent) !important;} #sistema .pant .mkPreview__tag{border-color:var(--mk-accent-soft);color:var(--mk-accent);} #sistema .pant .mkWeb__btn{background:var(--mk-accent) !important;color:#fff !important;} #sistema .pant .mkApp__chk{border-color:var(--mk-accent-soft);} #sistema .workCard{display:inline-block;margin:0 calc(1.6 * var(--sys-u));width:calc(31.2 * var(--sys-u));vertical-align:top;opacity:.3;-webkit-transition:opacity .2s linear,-webkit-transform cubic-bezier(.6,0,.2,1) .4s;transition:opacity .2s linear,-webkit-transform cubic-bezier(.6,0,.2,1) .4s;-o-transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .4s;transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .4s;transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .4s,-webkit-transform cubic-bezier(.6,0,.2,1) .4s} #sistema .workCard__media{height:calc(55.2 * var(--sys-u));max-height:calc(100vh - calc(28 * var(--sys-u)));width:100%;margin-bottom:calc(2.6 * var(--sys-u));z-index:2;position:relative;background-color:#202020;border-radius:calc(2 * var(--sys-u))} #sistema .workCard__media .media{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:calc(2 * var(--sys-u))} #sistema .workCard--cta .workCard__media{background-color:rgba(24,24,24,.5);border-radius:calc(2 * var(--sys-u));display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:auto;overflow:hidden} #sistema .workCard--cta .workCard__media .arrowButton{z-index:1} #sistema .workCard--cta .workCard__media::after{content:"";position:absolute;height:calc(64 * var(--sys-u));width:calc(64 * var(--sys-u));border-radius:100%;background-color:#ffffff;z-index:0;-webkit-transform:translateX(calc(-7.25 * var(--sys-u))) scale(.02);-ms-transform:translateX(calc(-7.25 * var(--sys-u))) scale(.02);transform:translateX(calc(-7.25 * var(--sys-u))) scale(.02);-webkit-transition:-webkit-transform .5s cubic-bezier(.6,0,.2,1);transition:-webkit-transform .5s cubic-bezier(.6,0,.2,1);-o-transition:transform .5s cubic-bezier(.6,0,.2,1);transition:transform .5s cubic-bezier(.6,0,.2,1);transition:transform .5s cubic-bezier(.6,0,.2,1),-webkit-transform .5s cubic-bezier(.6,0,.2,1)} #sistema .workCard--cta:hover .workCard__media::after{-webkit-transform:translateX(0) scale(1);-ms-transform:translateX(0) scale(1);transform:translateX(0) scale(1)} #sistema .workCard.active{-webkit-transform:translateY(calc(-12 * var(--sys-u)));-ms-transform:translateY(calc(-12 * var(--sys-u)));transform:translateY(calc(-12 * var(--sys-u)));opacity:1;-webkit-transition:opacity .2s linear,-webkit-transform cubic-bezier(.6,0,.2,1) .6s;transition:opacity .2s linear,-webkit-transform cubic-bezier(.6,0,.2,1) .6s;-o-transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .6s;transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .6s;transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .6s,-webkit-transform cubic-bezier(.6,0,.2,1) .6s} #sistema .workCard.active .workCard__content{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity .6s linear,-webkit-transform cubic-bezier(.6,0,.2,1) .6s;transition:opacity .6s linear,-webkit-transform cubic-bezier(.6,0,.2,1) .6s;-o-transition:opacity .6s linear,transform cubic-bezier(.6,0,.2,1) .6s;transition:opacity .6s linear,transform cubic-bezier(.6,0,.2,1) .6s;transition:opacity .6s linear,transform cubic-bezier(.6,0,.2,1) .6s,-webkit-transform cubic-bezier(.6,0,.2,1) .6s} @media screen and (orientation:portrait) and (max-width:800px),screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){ #sistema .workCard{display:inline-block;opacity:.5;-webkit-transition:opacity .2s linear,-webkit-transform cubic-bezier(.6,0,.2,1) .4s;transition:opacity .2s linear,-webkit-transform cubic-bezier(.6,0,.2,1) .4s;-o-transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .4s;transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .4s;transition:opacity .2s linear,transform cubic-bezier(.6,0,.2,1) .4s,-webkit-transform cubic-bezier(.6,0,.2,1) .4s} #sistema .workCard__media{height:calc(55.2 * var(--sys-u));max-height:calc(100vh - calc(30 * var(--sys-u)))} } /* SIN FONDO NEGRO, DE 01 A 05. Las maquetas traían la caja de «Lo que hacemos»: un móvil de 31,2 × 55,2u relleno de casi-negro, escalado a la caja que le tocara. Sobre la escena 3D se leía como un rectángulo opaco con otra forma que su hueco — y en 04 el factor bajaba a 0,48 y el cuadro de mando era un sello. Ahora la maqueta ES su caja (100 % × 100 %, sin escala) y todo lo que pintaba negro pasa al mismo cristal que las filas de auditoría: blanco al 3 %, trazo `--mk-line` y desenfoque para que las esquirlas de detrás no se crucen con el texto. El rojo se queda donde ya estaba. */ /* Sin escala: la maqueta ya es su caja. `ajusta()` escalaba un móvil fijo para que cupiera; con la maqueta al 100 % esa escala sólo podía sacarla de la caja —una carga con CSS en caché la dejó a 1,22 y cortó cabeceras y botones. */ #sistema .pant__fit{width:100%;height:100%;transform:none;} /* 03: la columna es flex centrada y la pantalla no pedía alto, así que el 100 % de la maqueta era el 100 % de nada. Se queda con lo que dejan rótulo y tarjeta. */ #sistema .e3__at .pant{flex:1 1 auto;min-height:0;} /* SIN FONDO, NINGUNO. Ni negro ni cristal: toda caja del recorrido se dibuja sólo con su trazo y deja ver la escena 3D. Se quitan también las sombras negras y el desenfoque. Lo que conserva color es dato, no envase: barras, pulsos, puntos, el botón de cita y el nodo central de la pizarra. */ #sistema .pant .mkScene, #sistema .pant .mkShoot__frame, #sistema .pant .mkBrowser, #sistema .pant .mkApp, #sistema .pant .mkBub--in, #sistema .pant .mkBub--typing, #sistema .pant .mkBub--out, #sistema .pant .mkBub--cita, #sistema .mkBrowser__bar, #sistema .mkBrowser__url, #sistema .mkScene__ava, #sistema .mkBoard, #sistema .mkNode:not(.mkNode--core), #sistema .mkKpi, #sistema .mkChart, #sistema .mkPreview, #sistema .mkReport, #sistema .mkBrand__logo, #sistema .mkBrand__tag, #sistema .mkWeb__block, #sistema .mkWeb__field, #sistema .mkApp__meals li, #sistema .mkShoot__piece, #sistema .mkShoot__subj, #sistema .e1__filas li, #sistema .e2__sujeto, #sistema .e3__redes li, #sistema .e3__agentes li, #sistema .e3__tarj, #sistema .e4__fuentes li, #sistema .e4__agente, #sistema .e4__rej li, #sistema .e5__nucleo, #sistema .e5__f, #sistema .e5__c, #sistema .e5__vueltas li{background:transparent !important;backdrop-filter:none;box-shadow:none;} #sistema .e1__obj .pant__caja.workCard__media{box-shadow:none;} @keyframes e1Marca{to{opacity:1;transform:scale(1)}} /* LOS TRAZOS DE LOS SVG, que el filtro por clases no trajo porque sólo miraba elementos HTML. Sin ellos cada `` y `` caía al `fill` por defecto del SVG —negro— y sin línea: la órbita de 05 era un disco negro, y los cables de 01, 03 y 04 y los enlaces de la pizarra, manchas oscuras en vez de hilos. Copiadas de makers-site/css/makers.css tal cual. */ #sistema .lz__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;} #sistema .lz__cable{fill:none;stroke:var(--mk-line);stroke-width:2;} #sistema .lz__cable--fino{stroke-width:1.6;} #sistema .lz__pulso{fill:none;stroke:var(--mk-accent);stroke-width:4;stroke-linecap:round; stroke-dasharray:30 1000;stroke-dashoffset:1030;opacity:0; filter:drop-shadow(0 0 6px rgba(255,45,26,.9));} #sistema .mkBoard__links{position:absolute;inset:0;width:100%;height:100%;} #sistema .mkBoard__links path{stroke:var(--mk-accent-soft);stroke-width:1;fill:none;stroke-dasharray:4 5;animation:mkFlow 1.4s linear infinite;} #sistema .e5__orb{fill:none;stroke:var(--mk-line);stroke-width:1.4;opacity:.7;} #sistema .e5__orb--ext{stroke-dasharray:3 7;opacity:.5;} #sistema .e5__radio{stroke:var(--mk-line);stroke-width:1.5;fill:none; transition:stroke .3s var(--mk-amb),opacity .3s var(--mk-amb);} #sistema .e5__radio--fino{stroke-width:1;opacity:.45;} #sistema .e5__flujo{fill:none;stroke:var(--mk-accent);stroke-width:3;stroke-linecap:round; stroke-dasharray:16 260;stroke-dashoffset:276;opacity:0; filter:drop-shadow(0 0 5px rgba(255,45,26,.9));} @media(max-width:960px){ #sistema .lz__svg{display:none;} } /* 04: el cuadro de mando necesita ancho, no un carril de 15u. Mitad y mitad, y las cifras a dos columnas — cuatro filas caben de sobra en el alto. */ #sistema .e4__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} #sistema .e4__rej{grid-template-columns:repeat(2,1fr);} /* MÁS GRANDE, MÁS SIMPLE, NADA RECORTADO ================================ LA UNIDAD MIRA LOS DOS EJES. `--sys-u` salía sólo del ancho (0,694vw), y el recorrido vive en un plano de 100svh: en 16:9 las maquetas pedían más alto del que había y se cortaban por abajo — medido a 1280×720, 1440×900 y 1920×1080. Con `min(ancho, alto)` la sección entera cabe en cualquier proporción. `--u0` es la base; `--sys-u` se reescala por zona. Se redeclara aquí el caso retrato porque esta regla va después y lo pisaría. */ #sistema{--u0:min(.6944444444vw, 1.2svh);--sys-u:var(--u0);} @media (max-width:960px){ #sistema{--u0:1.25vw;} } @media screen and (orientation:portrait) and (max-width:800px){ #sistema{--u0:2.6666666667vw;} } /* UN SOLO MANDO DE ESCALA para todo lo gráfico: iconos, tarjetas, maquetas y su texto crecen juntos, en la misma proporción, sin tocar una a una. */ #sistema .lz{--sys-u:calc(var(--u0) * 1.3);} @media (max-width:960px){ #sistema .lz{--sys-u:calc(var(--u0) * 1.15);} } /* El marco gana alto para el gráfico: fuera la cabecera repetida (el raíl ya dice que son cinco fases) y el título a una línea cuando cabe. */ #sistema .sys__head{display:none;} #sistema .sys--recorrido .sys__ancla{grid-template-rows:auto minmax(0,1fr);padding:max(8vh, 4.5rem) 0 3vh;} #sistema .sysRail__p b{font-size:calc(1.5 * var(--u0));} #sistema .sysRail__p span{font-size:calc(1.8 * var(--u0));} #sistema .esc__cab{max-width:none;} #sistema .esc__quien{font-size:calc(1.4 * var(--u0));} #sistema .esc__t{font-size:calc(5.2 * var(--u0));} #sistema .esc__d{font-size:calc(2 * var(--u0));max-width:calc(78 * var(--u0));} #sistema .lzK{font-size:calc(1.5 * var(--sys-u));} #sistema .mkScene__badge{display:none;} /* 01 · La pizarra deja de ser un mapa de posiciones sueltas —con la letra grande los nodos se pisaban— y pasa a rejilla: el cliente arriba, sus seis piezas en tres filas. La cabecera repetía el nombre del nodo central. */ #sistema .mkScene--board .mkScene__bar, #sistema .mkBoard__links{display:none;} #sistema .mkBoard{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:calc(1.2 * var(--sys-u)); padding:calc(1.4 * var(--sys-u));margin-top:0;min-height:0;} #sistema .mkNode{position:static;transform:none;white-space:normal;display:flex;align-items:center;justify-content:center; text-align:center;font-size:calc(1.5 * var(--sys-u));padding:calc(.9 * var(--sys-u));min-width:0;} #sistema .mkNode--core{grid-column:1 / -1;font-size:calc(1.9 * var(--sys-u));} /* El ADN de marca: lo que una marca necesita sí o sí antes de planificar. El título deja el bloque blanco —era la única caja rellena de toda la sección— y resalta por escala, en blanco; la línea de apoyo, en el rojo de la voz de sistema. Las seis piezas repiten el patrón de las filas de auditoría: icono rojo, nombre y para qué sirve. */ #sistema .mkNode--core{background:transparent;color:#fff;border-color:var(--mk-accent);flex-direction:column;gap:calc(.6 * var(--sys-u));} #sistema .mkNode--core b{font-size:calc(2.6 * var(--sys-u));font-weight:500;line-height:1.05;letter-spacing:-.01em;} #sistema .mkNode--core em{font-style:normal;font-size:calc(1.15 * var(--sys-u));font-weight:500;color:var(--mk-accent);} #sistema .mkNode:not(.mkNode--core){flex-direction:column;gap:calc(.45 * var(--sys-u));} #sistema .mkNode svg{width:calc(2.4 * var(--sys-u));height:calc(2.4 * var(--sys-u));fill:var(--mk-accent);flex:none;} #sistema .mkNode:not(.mkNode--core) b{font-size:calc(1.55 * var(--sys-u));font-weight:500;line-height:1.1;} #sistema .mkNode:not(.mkNode--core) em{font-style:normal;font-size:calc(1.1 * var(--sys-u));font-weight:500;opacity:.62;line-height:1.25;} /* Las seis piezas del ADN entran una vez y se QUEDAN. La maqueta original las hacía parpadear en bucle (`mkNodeIn`, 5,5 s infinito, arrancando en opacidad 0): cada pocos segundos desaparecían dos o tres cajas. Mismo valor en hover y en escena activa, para que pasar el ratón no reinicie la entrada. */ #sistema .workCard:hover .mkNode:not(.mkNode--core), #sistema .workCard.mk-playing .mkNode:not(.mkNode--core){animation:fvEntra .45s var(--mk-in) both;animation-delay:calc(var(--d,0) * .08s);} /* Seis piezas con icono, nombre y línea no caben en 2×3 cuando la ventana es 16:9: a 1280×720 cada caja medía 112×67 y el contenido pedía ~110 de alto. La pizarra gana ancho —«Plan escrito» son tres palabras y le sobraba columna— y las piezas pasan a 3×2 bajo un título que sólo ocupa lo que mide. El cable hacia el plan se movió con ella en el SVG (851→896). */ @media (min-width:961px){ #sistema .e1__obj{left:36%;width:40%;} #sistema .e1__plan{width:20%;} } #sistema .mkBoard{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;} @media (max-width:600px){ #sistema .mkBoard{grid-template-columns:repeat(2,minmax(0,1fr));} } /* 02 · Cada maqueta se queda con su idea: el rodaje con el plano, la marca con logo, fotos, color y resultado, la web con su promesa y su botón. */ #sistema .mkShoot__dist, #sistema .mkShoot__stats, #sistema .mkBrand__type, #sistema .mkBrand__apps, #sistema .mkWeb__stats, #sistema .mkApp__macros, #sistema .mkApp__head em, #sistema .mkApp__meals em, #sistema .mkApp__meals li:nth-child(n+4){display:none;} /* La marca, en logo, color y resultado: las tres fotos le quitaban al logo el alto que necesita para verse entero. La mini-app se superponía al titular de la web — la web ya la anuncia en su propia promesa. */ #sistema .mkBrand__shots, #sistema .pant .mkApp{display:none !important;} #sistema .mkBrand__logo{height:auto;flex:1 1 auto;min-height:calc(10 * var(--sys-u));} #sistema .mkBrand__mark svg, #sistema .mkBrand__mark--final img{width:calc(7 * var(--sys-u));height:auto;} /* 01 · El objetivo en una línea: a 1280 se partía y la segunda línea tocaba el borde. */ #sistema .e1__obj__k{font-size:calc(1.05 * var(--sys-u));letter-spacing:.08em;white-space:nowrap;} /* 03 · El chat se queda en pregunta y cita cerrada. El «escribiendo» y el «te agendo ahora» eran el paso intermedio, y la tarjeta de reserva de debajo repetía la cita: a 720 px de alto la conversación pedía 489 px en 300. */ #sistema .mkBub--typing, #sistema .pant .mkBub--out:not(.mkBub--cita), #sistema .e3__tarj{display:none;} /* Los iconos de redes van pegados al borde y su latido los escala a 1,12: crecían 5 px fuera de la ventana. Desde su lado izquierdo crecen hacia dentro. */ #sistema .e3__redes li{transform-origin:0 50%;} #sistema .mkApp{width:46%;} #sistema .e2__salidas > li > b{font-size:calc(1.7 * var(--sys-u));} /* 04 · El cuadro de mando ES la rejilla de cifras: la maqueta de al lado lo repetía en pequeño. Seis cifras a tres columnas, con todo el alto. */ /* `!important` porque `.pant.workCard` lo fuerza a `display:block !important`. */ #sistema .e4__panel .pant, #sistema .e4__rej li:nth-child(n+7){display:none !important;} #sistema .e4__panel{display:flex;flex-direction:column;} #sistema .e4__rej{flex:1 1 auto;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);align-content:stretch;} #sistema .e4__rej b{font-size:calc(2.8 * var(--sys-u));} #sistema .e4__rej em{font-size:calc(1.1 * var(--sys-u));} /* 05 · La órbita cuenta las cinco fases alrededor de la IA. Los diez canales diminutos y sus radios finos eran ruido a ese tamaño; el rótulo y el pie repetían lo que ya dice la entradilla. */ #sistema .e5__c, #sistema .e5__radio--fino, #sistema .e5__ej, #sistema .e5__pie{display:none;} /* Más alto para la órbita —las tarjetas de vuelta miden unas 9u— y el núcleo a un tercio: a 46 % del alto, las fases de arriba y abajo se le montaban. */ #sistema .e5__eco{height:calc(100% - calc(10 * var(--sys-u)));} #sistema .e5__nucleo{height:34%;} #sistema .e5__f b{font-size:calc(1.3 * var(--sys-u));} #sistema .e5__f em{font-size:calc(1.6 * var(--sys-u));} #sistema .e5__nucleo b{font-size:calc(1.6 * var(--sys-u));} #sistema .e5__nucleo em{font-size:calc(1.05 * var(--sys-u));} /* La tarjeta de vuelta tenía cifra y propuesta en la misma celda, una encima de otra. Ahora: vuelta y barras arriba, cifra, y la propuesta debajo. */ #sistema .e5__vueltas li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k barras" "b barras" "em em";row-gap:calc(.3 * var(--sys-u));} #sistema .e5__v__k{grid-area:k;} #sistema .e5__v__barras{grid-area:barras;} #sistema .e5__vueltas b{grid-area:b;font-size:calc(2 * var(--sys-u));} #sistema .e5__vueltas em{grid-area:em;text-align:left;font-size:calc(1.3 * var(--sys-u));} /* 02 · SISTEMA DE MARCA: LA EXPLORACIÓN ==================================== Antes del logo final hay muchos prediseños. El escenario enseña seis pasos —boceto, variante, dos maquetas, otra variante, final— sobre la retícula que busca la simetría: cuadrado, ejes, las diagonales a 45° que siguen las franjas del isotipo y los dos círculos. Todas las variantes son EL MISMO SVG usado como máscara, así que cualquier cambio del isotipo llega a las seis. Los tamaños van en unidades de contenedor (cq): el escenario cambia de proporción con la ventana y el logo se mide contra su lado corto. Sin escena activa (móvil, movimiento reducido) queda el final, quieto. */ #sistema .mkLogo{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(1.2 * var(--sys-u));} #sistema .mkLogo__stage{position:relative;flex:1 1 auto;min-height:calc(10 * var(--sys-u));container-type:size; border:1px solid var(--mk-line);border-radius:calc(1.4 * var(--sys-u));overflow:hidden;} #sistema .mkLogo__guias{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.2);stroke-width:1px;vector-effect:non-scaling-stroke;} #sistema .mkLogo__guias *{vector-effect:non-scaling-stroke;} #sistema .mkLogo__reticula{stroke:rgba(255,255,255,.1);stroke-dasharray:2 3;} #sistema .mkLogo__circulo{stroke:var(--mk-accent-soft);} #sistema .mkLogo__v{position:absolute;inset:0;display:grid;place-items:center;opacity:0;} #sistema .mkLogo__v--final{opacity:1;} #sistema .mkLogo__iso{display:block;width:min(50cqw, 50cqh);aspect-ratio:1;background:#fff; -webkit-mask:url("../assets/iso3d/makers-isotipo-limpio.svg") center / contain no-repeat; mask:url("../assets/iso3d/makers-isotipo-limpio.svg") center / contain no-repeat;} #sistema .mkLogo__v--boceto .mkLogo__iso{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.9) 0 1.5px,transparent 1.5px 4px);} #sistema .mkLogo__v--espejo .mkLogo__iso{background:var(--mk-accent);transform:scaleX(-1) rotate(90deg);} #sistema .mkLogo__app{display:grid;place-items:center;width:min(50cqw, 50cqh);aspect-ratio:1;border:1px solid var(--mk-accent);border-radius:24%;} #sistema .mkLogo__app .mkLogo__iso{width:56%;} #sistema .mkLogo__card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"iso nom" "iso l1" "iso l2";align-items:center;column-gap:7%; width:min(80cqw, 120cqh);aspect-ratio:1.75;padding:0 9%;box-sizing:border-box;container-type:inline-size; border:1px solid rgba(255,255,255,.45);border-radius:4%;transform:rotate(-5deg);} #sistema .mkLogo__card .mkLogo__iso{grid-area:iso;width:26cqi;} #sistema .mkLogo__card b{grid-area:nom;font-size:7.5cqi;font-weight:500;letter-spacing:.14em;align-self:end;} #sistema .mkLogo__card em{grid-area:l1;height:1.8cqi;width:70%;border-radius:100px;background:rgba(255,255,255,.3);align-self:center;} #sistema .mkLogo__card em + em{grid-area:l2;width:45%;align-self:start;} #sistema .mkLogo__ring{display:grid;place-items:center;width:min(56cqw, 56cqh);aspect-ratio:1;border:2px solid var(--mk-accent);border-radius:50%; outline:1px dashed rgba(255,255,255,.35);outline-offset:min(3cqw, 3cqh);} #sistema .mkLogo__ring .mkLogo__iso{width:54%;} #sistema .mkLogo__v--final .mkLogo__iso{filter:drop-shadow(0 0 min(4cqw,4cqh) rgba(255,45,26,.35));} #sistema .mkLogo__paso{position:absolute;top:calc(.9 * var(--sys-u));left:calc(1.1 * var(--sys-u));display:grid;} #sistema .mkLogo__paso b{grid-area:1 / 1;font-size:calc(1.05 * var(--sys-u));font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-accent);opacity:0;white-space:nowrap;} #sistema .mkLogo__paso b:last-child{opacity:1;} /* La tira de contacto: los seis prediseños a la vez, el que se ve se enciende y el final lleva la marca de elegido. */ #sistema .mkLogo__tira{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(.6 * var(--sys-u));} #sistema .mkLogo__tira li{position:relative;display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--mk-line);border-radius:calc(.6 * var(--sys-u));container-type:inline-size;} #sistema .mkLogo__tira .mkLogo__iso{width:52cqi;} #sistema .mkLogo__tira li:nth-child(1) .mkLogo__iso{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.9) 0 1px,transparent 1px 2.5px);} #sistema .mkLogo__tira li:nth-child(2) .mkLogo__iso{background:var(--mk-accent);transform:scaleX(-1) rotate(90deg);} #sistema .mkLogo__tira li:nth-child(3)::before{content:"";position:absolute;inset:18%;border:1px solid var(--mk-accent-soft);border-radius:24%;} #sistema .mkLogo__tira li:nth-child(3) .mkLogo__iso{width:36cqi;} #sistema .mkLogo__tira li:nth-child(4) .mkLogo__iso{width:30cqi;transform:translateX(-18cqi);} #sistema .mkLogo__tira li:nth-child(4)::after{content:"";position:absolute;left:52%;top:44%;width:30%;height:5cqi;border-radius:100px;background:rgba(255,255,255,.35);box-shadow:0 9cqi 0 rgba(255,255,255,.2);} #sistema .mkLogo__tira li:nth-child(5)::before{content:"";position:absolute;inset:16%;border:1px solid var(--mk-accent);border-radius:50%;} #sistema .mkLogo__tira li:nth-child(5) .mkLogo__iso{width:34cqi;} #sistema .mkLogo__tira li:last-child{border-color:var(--mk-accent);} #sistema .mkLogo__tira li:last-child::after{content:"✓";position:absolute;top:-22%;right:-22%;display:grid;place-items:center;width:44%;aspect-ratio:1;border-radius:50%; background:var(--mk-accent);color:#fff;font-size:26cqi;font-weight:500;line-height:1;} /* Sólo opacidad: la capa ocupa el escenario entero y cualquier escala la sacaba de su caja. */ @keyframes mkLogoPaso{0%{opacity:0}3%,14%{opacity:1}17.5%,100%{opacity:0}} @keyframes mkLogoRotulo{0%{opacity:0}3%,14%{opacity:1}17.5%,100%{opacity:0}} @keyframes mkLogoTira{0%{border-color:var(--mk-line)}3%,14%{border-color:var(--mk-accent)}17.5%,100%{border-color:var(--mk-line)}} @keyframes mkLogoGuia{0%{stroke-dashoffset:100;opacity:1}12%,80%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:.35}} #sistema .workCard.mk-playing .mkLogo__v, #sistema .workCard.mk-playing .mkLogo__paso b{animation:mkLogoPaso 12s var(--mk-ease) calc(var(--k) * 2s) infinite backwards;} #sistema .workCard.mk-playing .mkLogo__paso b{animation-name:mkLogoRotulo;} #sistema .workCard.mk-playing .mkLogo__tira li{animation:mkLogoTira 12s var(--mk-ease) calc(var(--k) * 2s) infinite backwards;} #sistema .workCard.mk-playing .mkLogo__guias > *{stroke-dasharray:100;animation:mkLogoGuia 12s var(--mk-ease) infinite;} #sistema .workCard.mk-playing .mkLogo__reticula{stroke-dasharray:2 3;animation:none;} /* 02 · NUTRI-ANA: EL PROTOTIPO DE APP ======================================== La web de la nutricionista pasa a ser su app, porque lo que vende es lo que hace el paciente: reservar cita y escribirle. Dos pestañas que se turnan cada cinco segundos. Quieta (móvil, movimiento reducido) se queda en la reserva ya confirmada, que se entiende sola. El botón es la única pieza rellena: es la acción, como «Reservar cita gratis» antes. */ #sistema .mkNutri{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(1.1 * var(--sys-u)); padding:calc(1.2 * var(--sys-u)) calc(1.3 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(2.6 * var(--sys-u));overflow:hidden;} #sistema .mkNutri__perfil{display:flex;align-items:center;gap:calc(1 * var(--sys-u));} #sistema .mkNutri__foto{flex:none;display:grid;place-items:center;width:calc(3.6 * var(--sys-u));aspect-ratio:1;border-radius:50%; border:1px solid var(--mk-accent);color:var(--mk-accent);font-size:calc(1.5 * var(--sys-u));font-weight:500;} #sistema .mkNutri__quien{display:flex;flex-direction:column;min-width:0;line-height:1.2;} #sistema .mkNutri__quien b{font-size:calc(1.4 * var(--sys-u));font-weight:500;white-space:nowrap;} #sistema .mkNutri__quien em{font-style:normal;font-size:calc(1.05 * var(--sys-u));opacity:.62;display:flex;align-items:center;gap:calc(.5 * var(--sys-u));} /* Tres pestañas: lo que hace el paciente por su cuenta. Sin chat — la escena 03 ya enseña la conversación y dos chats seguidos se leían como lo mismo. Se turnan cada 4 s; quieta (móvil, movimiento reducido) se queda en Objetivos, que se entiende sin animación. */ #sistema .mkNutri__tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--mk-line);} #sistema .mkNutri__tab{padding:calc(.7 * var(--sys-u)) 0;text-align:center;font-size:calc(1.15 * var(--sys-u));font-weight:500;opacity:.45;} #sistema .mkNutri__tab:nth-child(3){opacity:1;} #sistema .mkNutri__subraya{position:absolute;left:0;bottom:-1px;width:33.3333%;height:2px;background:var(--mk-accent);transform:translateX(200%);} #sistema .mkNutri__pantallas{position:relative;flex:1 1 auto;min-height:0;} #sistema .mkNutri__pant{position:absolute;inset:0;display:flex;flex-direction:column;gap:calc(.6 * var(--sys-u));opacity:0;} /* A 1280×720 la Dieta pasaba 21 px del hueco: el aire se aprieta en toda la app por igual —separación, marco y filas—, nunca la letra. */ #sistema .mkNutri{gap:calc(.8 * var(--sys-u));padding:calc(1 * var(--sys-u)) calc(1.2 * var(--sys-u));text-align:left;} #sistema .mkNutri__comidas li{padding-block:calc(.45 * var(--sys-u));} #sistema .mkNutri__objetivos{opacity:1;} #sistema .mkNutri__k{margin:0;font-size:calc(1.05 * var(--sys-u));font-weight:500;opacity:.62;} /* Dieta: lo comido se marca; la cena se marca sola al registrarla. */ #sistema .mkNutri__comidas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(.5 * var(--sys-u));} #sistema .mkNutri__comidas li{display:flex;align-items:center;gap:calc(.8 * var(--sys-u));padding:calc(.6 * var(--sys-u)) calc(.9 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(.9 * var(--sys-u));} #sistema .mkNutri__comidas b{flex:none;font-size:calc(1.2 * var(--sys-u));font-weight:500;} #sistema .mkNutri__comidas em{flex:1;min-width:0;font-style:normal;font-size:calc(1.05 * var(--sys-u));opacity:.62;} #sistema .mkNutri__chk{flex:none;display:grid;place-items:center;width:calc(1.8 * var(--sys-u));aspect-ratio:1;border-radius:50%;border:1px solid var(--mk-accent); color:var(--mk-accent);font-style:normal;font-size:calc(1 * var(--sys-u));font-weight:500;} #sistema .mkNutri__kcal{display:flex;flex-direction:column;gap:calc(.4 * var(--sys-u));font-size:calc(1.05 * var(--sys-u));} #sistema .mkNutri__kcal b{font-size:calc(1.3 * var(--sys-u));} #sistema .mkNutri__kcal i, #sistema .mkNutri__meta i{height:calc(.6 * var(--sys-u));border-radius:100px; background:linear-gradient(var(--mk-accent),var(--mk-accent)) 0 0 / 79% 100% no-repeat, rgba(255,255,255,.12);} /* Objetivos: la cifra que el paciente viene a ver, la curva que la explica y lo que ha bajado y subido. 82 − 6,4 = 75,6 kg; 6,4 de 8 = 80 %. */ #sistema .mkNutri__peso{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 calc(.8 * var(--sys-u));} #sistema .mkNutri__peso b{font-size:calc(2.8 * var(--sys-u));font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--mk-accent);font-variant-numeric:tabular-nums;} #sistema .mkNutri__peso em{font-style:normal;font-size:calc(1.05 * var(--sys-u));opacity:.62;} /* La curva crece con el hueco pero con techo: en una ventana alta llegaba a 444 px y la bajada parecía un precipicio. Meta y cambios van al pie. */ #sistema .mkNutri__grafica{flex:1 1 auto;min-height:calc(3 * var(--sys-u));max-height:calc(14 * var(--sys-u));width:100%;overflow:visible;} #sistema .mkNutri__meta{margin-top:auto;} #sistema .mkNutri__grafica polyline{fill:none;stroke:var(--mk-accent);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;} #sistema .mkNutri__meta{display:grid;grid-template-columns:1fr auto;gap:calc(.4 * var(--sys-u)) calc(.8 * var(--sys-u));font-size:calc(1.1 * var(--sys-u));} #sistema .mkNutri__meta b{color:var(--mk-accent);} #sistema .mkNutri__meta i{grid-column:1 / -1;background-size:80% 100%, auto;} #sistema .mkNutri__cambios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:calc(.6 * var(--sys-u));} #sistema .mkNutri__cambios li{display:flex;flex-direction:column;padding:calc(.5 * var(--sys-u)) calc(.9 * var(--sys-u));border:1px solid var(--mk-line);border-radius:calc(.9 * var(--sys-u));} #sistema .mkNutri__cambios b{font-size:calc(1.4 * var(--sys-u));font-weight:500;} #sistema .mkNutri__cambios em{font-style:normal;font-size:calc(1 * var(--sys-u));opacity:.62;} #sistema .mkNutri__dias, #sistema .mkNutri__horas{list-style:none;margin:0;padding:0;display:grid;gap:calc(.5 * var(--sys-u));} #sistema .mkNutri__dias{grid-template-columns:repeat(5,minmax(0,1fr));} #sistema .mkNutri__dias li{display:flex;flex-direction:column;align-items:center;padding:calc(.5 * var(--sys-u)) 0;border:1px solid var(--mk-line);border-radius:calc(.8 * var(--sys-u)); font-size:calc(.95 * var(--sys-u));opacity:.75;} #sistema .mkNutri__dias b{font-size:calc(1.45 * var(--sys-u));font-weight:500;} #sistema .mkNutri__dias li.is-sel{border-color:var(--mk-accent);color:var(--mk-accent);opacity:1;} #sistema .mkNutri__horas{grid-template-columns:1fr 1fr;} #sistema .mkNutri__horas li{padding:calc(.55 * var(--sys-u)) 0;text-align:center;border:1px solid var(--mk-line);border-radius:100px;font-size:calc(1.2 * var(--sys-u));font-weight:500;font-variant-numeric:tabular-nums;} #sistema .mkNutri__horas li.is-sel{border-color:var(--mk-accent);color:var(--mk-accent);} #sistema .mkNutri__boton{display:grid;margin-top:auto;border-radius:100px;background:var(--mk-accent);color:#fff;text-align:center; font-size:calc(1.25 * var(--sys-u));font-weight:500;padding:calc(.8 * var(--sys-u)) calc(1 * var(--sys-u));} #sistema .mkNutri__boton > span{grid-area:1 / 1;white-space:nowrap;} #sistema .mkNutri__reservar{opacity:0;} /* Un ciclo de 12 s, un tercio por pestaña. Cada pantalla entra con su retraso (--k × 4 s); lo de dentro va sobre el reloj común: la cena se marca y las kcal suben en Dieta, la hora y el botón cambian en Llamada, la curva se dibuja y la barra se llena en Objetivos. */ @keyframes mkNutriPant{0%{opacity:0}2%,31%{opacity:1}33.3%,100%{opacity:0}} @keyframes mkNutriTab{0%{opacity:.45}2%,31%{opacity:1}33.3%,100%{opacity:.45}} @keyframes mkNutriSubraya{0%,31%{transform:none}33.3%,64%{transform:translateX(100%)}66.6%,97%{transform:translateX(200%)}100%{transform:none}} @keyframes mkNutriCena{0%,13%{border-color:var(--mk-line);color:transparent}16%,100%{border-color:var(--mk-accent);color:var(--mk-accent)}} @keyframes mkNutriKcal{0%,13%{background-size:62% 100%, auto}16%,100%{background-size:79% 100%, auto}} @keyframes mkNutriHora{0%,40%{border-color:var(--mk-line);color:inherit}43%,100%{border-color:var(--mk-accent);color:var(--mk-accent)}} @keyframes mkNutriReservar{0%,50%{opacity:1}53%,100%{opacity:0}} @keyframes mkNutriConfirmada{0%,50%{opacity:0}53%,100%{opacity:1}} @keyframes mkNutriLinea{0%,67%{stroke-dashoffset:100}82%,100%{stroke-dashoffset:0}} @keyframes mkNutriMeta{0%,70%{background-size:0% 100%, auto}85%,100%{background-size:80% 100%, auto}} #sistema .workCard.mk-playing .mkNutri__pant{animation:mkNutriPant 12s var(--mk-ease) calc(var(--k) * 4s) infinite backwards;} #sistema .workCard.mk-playing .mkNutri__tab{animation:mkNutriTab 12s var(--mk-ease) calc(var(--k) * 4s) infinite backwards;} #sistema .workCard.mk-playing .mkNutri__subraya{animation:mkNutriSubraya 12s var(--mk-ease) infinite;} #sistema .workCard.mk-playing .mkNutri__chk--cena{animation:mkNutriCena 12s var(--mk-ease) infinite;} #sistema .workCard.mk-playing .mkNutri__kcal i{animation:mkNutriKcal 12s var(--mk-ease) infinite;} #sistema .workCard.mk-playing .mkNutri__horas li.is-sel{animation:mkNutriHora 12s var(--mk-ease) infinite;} #sistema .workCard.mk-playing .mkNutri__reservar{animation:mkNutriReservar 12s var(--mk-ease) infinite;} #sistema .workCard.mk-playing .mkNutri__confirmada{animation:mkNutriConfirmada 12s var(--mk-ease) infinite;} #sistema .workCard.mk-playing .mkNutri__grafica polyline{stroke-dasharray:100;animation:mkNutriLinea 12s var(--mk-ease) infinite;} #sistema .workCard.mk-playing .mkNutri__meta i{animation:mkNutriMeta 12s var(--mk-ease) infinite;} /* EN COLUMNA (tablet y móvil) ============================================= Retrato ≤800 px usaba 2,667vw a secas: bien a 375 px (10 px), pero a 768 la unidad valía 20 px y todo se agigantaba. Techo de 12 px. */ @media screen and (orientation:portrait) and (max-width:800px){ #sistema{--u0:min(2.6666666667vw, 12px);} } @media (max-width:960px){ #sistema .sys{width:calc(100% - 2.5rem);} /* Sin recorrido, la caja de la maqueta no tiene de quién sacar el alto: el 100 % era el 100 % de nada y la maqueta entera quedaba recortada. */ #sistema .pant__caja.workCard__media, #sistema .e1__obj .pant__caja.workCard__media, #sistema .e2__salidas .pant__caja.workCard__media{height:calc(46 * var(--sys-u)) !important;} #sistema .e1__obj{aspect-ratio:auto;max-width:none;} /* Las tres salidas, una debajo de otra: en fila desbordaban a 768 px. */ #sistema .e2__salidas{flex-direction:column;gap:calc(3 * var(--sys-u));} #sistema .e5__eco{position:relative;left:auto;transform:none;width:100%;height:calc(40 * var(--sys-u));} #sistema .e5__nucleo{height:28%;} #sistema .e5__vueltas{position:static;flex-direction:column;margin-top:calc(2 * var(--sys-u));} } /* Teléfono: la órbita no cabe. En 400 px de ancho la elipse es tan estrecha que las fases de los lados tocaban el núcleo aun encogido. Aquí se deja la geometría: la IA arriba y las cinco fases debajo, centradas, en orden. */ @media (max-width:600px){ #sistema .e5__eco{display:flex;flex-wrap:wrap;justify-content:center;align-content:center; gap:calc(1 * var(--sys-u));height:auto;padding-block:calc(1 * var(--sys-u));} #sistema .e5__eco > svg{display:none;} #sistema .e5__nucleo{position:relative;left:auto;top:auto;transform:none;height:auto; width:calc(14 * var(--sys-u));flex:0 0 auto;margin:0 calc(50% - 7 * var(--sys-u)) calc(1 * var(--sys-u));} #sistema .e5__f{position:static;transform:none;padding:calc(.6 * var(--sys-u)) calc(1.1 * var(--sys-u));} #sistema .e5__f:hover, #sistema .e5__f:focus-visible{transform:scale(1.04);} #sistema .e5__f b{font-size:calc(1.05 * var(--sys-u));} #sistema .e5__f em{font-size:calc(1.3 * var(--sys-u));} } /* Sin recorrido nadie pone `.is-activa`, así que lo que entra animado se quedaba invisible: la regla de arriba lo cubría todo menos las fases y las vueltas. */ #sistema .sys:not(.sys--recorrido) .e5__f{opacity:1;} #sistema .sys:not(.sys--recorrido) .e5__vueltas li{opacity:1;transform:none;} #sistema .sys:not(.sys--recorrido) .e5__v__barras i{height:var(--h);opacity:.95;} /* 03 · TRES COLUMNAS, UNA MISMA BANDA ====================================== Publican, el banco de agentes y el chat vivían cada uno a su altura: los iconos repartidos por todo el alto, el banco centrado en un 60 %, el chat estirado con la conversación al pie. Ahora comparten banda —mismo alto, mismo arranque, rótulos en la misma línea— y dentro de ella los cinco iconos y las cuatro tarjetas se reparten con el mismo ritmo. Con techo, para que en una ventana alta no se conviertan en baldosas. Los cables ya no salen de coordenadas fijas del SVG: `cablea()` en sistema-recorrido.js los traza desde las piezas reales. */ /* La banda se centra con `top` calculado, NO con translateY(-50%): los cables se trazan con offsetTop, que ignora los transform, y con el translate todos los hilos acababan media banda por debajo de sus piezas. Iconos y tarjetas LLENAN la banda con el mismo hueco entre piezas: con techo y `space-between` los cinco iconos y las cuatro tarjetas quedaban a ritmos distintos. Los iconos se miden contra el alto de su lista (cqh) para seguir siendo cuadrados. */ @media (min-width:961px){ #sistema .e3__pub, #sistema .e3__banco, #sistema .e3__at{--banda:min(100%, calc(46 * var(--sys-u))); top:calc((100% - var(--banda)) / 2);bottom:auto;height:var(--banda);min-height:0;transform:none; display:flex;flex-direction:column;justify-content:flex-start;gap:calc(1.2 * var(--sys-u));} #sistema .e3__pub{left:0;width:18%;} #sistema .e3__banco{left:37%;width:26%;} #sistema .e3__at{right:0;width:30%;} #sistema .e3__pub .lzK, #sistema .e3__at .lzK, #sistema .e3__banco__k{flex:none;height:calc(2.6 * var(--sys-u));margin:0; display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;} #sistema .e3__banco__k span{width:auto;margin-left:calc(.4 * var(--sys-u));} #sistema .e3__redes, #sistema .e3__agentes{flex:1 1 auto;min-height:0;justify-content:flex-start;gap:calc(1.2 * var(--sys-u));} #sistema .e3__redes{container-type:size;} #sistema .e3__redes li{flex:none;align-self:flex-start;aspect-ratio:auto; width:min(calc((100cqh - 4 * 1.2 * var(--sys-u)) / 5), 100cqw);height:min(calc((100cqh - 4 * 1.2 * var(--sys-u)) / 5), 100cqw);} #sistema .e3__agentes li{flex:1 1 0;min-height:0;height:auto;box-sizing:border-box;} #sistema .e3__at .pant{flex:1 1 auto;min-height:0;} } /* La conversación, en el centro de su pantalla y no pegada al pie. */ #sistema .mkScene--chat .mkScene__bar{margin-bottom:0;} #sistema .mkScene--chat .mkChat{flex:1 1 auto;justify-content:center;gap:calc(2.4 * var(--sys-u));padding-top:0;} /* 05 · EL CICLO, ORDENADO =================================================== Era una elipse con radios que cruzaban «La IA» y pastillas sueltas encima de los aros. Ahora es un círculo real —la caja es cuadrada— con las cinco fases SOBRE el aro a 72° exactos: cada una, un punto rojo numerado con su nombre por fuera, sin pisar la línea. Las flechas entre fases dicen el sentido y un pulso da la vuelta: se lee 01 → 05 → 01 sin más explicación. */ #sistema .e5__eco{top:calc(3 * var(--sys-u));height:calc(100% - calc(17 * var(--sys-u)));width:auto;aspect-ratio:1;max-width:100%;container-type:size;} /* Con la órbita pequeña (1280×720: 235 px; tablet: 354 px) la frase no cabía en el núcleo y cruzaba su aro: queda sólo «La IA». */ @container (max-height:380px){ #sistema .e5__nucleo em{display:none;} } #sistema .e5__eco > svg{overflow:visible;} #sistema .e5__anillo{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5px;vector-effect:non-scaling-stroke;} #sistema .e5__pulso{fill:none;stroke:var(--mk-accent);stroke-width:3px;stroke-linecap:round;vector-effect:non-scaling-stroke; stroke-dasharray:5 95;stroke-dashoffset:88;filter:drop-shadow(0 0 5px rgba(255,45,26,.9));} #sistema .e5__flecha{fill:none;stroke:var(--mk-accent);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.8;} #sistema .is-activa .e5__pulso{animation:e5Vuelta 6s linear infinite;} @keyframes e5Vuelta{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} #sistema .e5__f{width:calc(3.6 * var(--sys-u));height:calc(3.6 * var(--sys-u));padding:0;gap:0;border:0;border-radius:50%;justify-content:center;} #sistema .e5__f b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--mk-accent);color:#fff; font-size:calc(1.25 * var(--sys-u));letter-spacing:0;} #sistema .e5__f em{position:absolute;white-space:nowrap;font-size:calc(1.8 * var(--sys-u));font-weight:500;color:#fff;} #sistema .e5__f[data-r="0"] em{bottom:calc(100% + .6 * var(--sys-u));left:50%;transform:translateX(-50%);} #sistema .e5__f[data-r="1"] em{left:calc(100% + .9 * var(--sys-u));top:50%;transform:translateY(-50%);} /* Las dos de abajo abren hacia fuera: centradas bajo el punto, «Distribuyen» cruzaba el aro, que desde ahí baja hacia el centro. */ #sistema .e5__f[data-r="2"] em{top:calc(100% + .5 * var(--sys-u));left:25%;transform:none;} #sistema .e5__f[data-r="3"] em{top:calc(100% + .5 * var(--sys-u));right:25%;left:auto;transform:none;} #sistema .e5__f[data-r="4"] em{right:calc(100% + .9 * var(--sys-u));top:50%;transform:translateY(-50%);} #sistema .e5__f:hover em, #sistema .e5__f:focus-visible em{color:var(--mk-accent);} @media (max-width:960px){ /* Sitio a los lados para los nombres de 02 y 05: a 768 px «Evoluciona» salía por el borde de la ventana. */ #sistema .e5__eco{top:auto;width:min(calc(100% - 26 * var(--sys-u)), calc(44 * var(--sys-u)));height:auto;aspect-ratio:1;margin:calc(3 * var(--sys-u)) auto 0;} } /* En teléfono la órbita pasa a lista con alto automático: la contención de tamaño lo dejaría en cero. */ @media (max-width:600px){ #sistema .e5__eco{container-type:normal;} } /* Teléfono: sin aro (ver el bloque de columna), las fases vuelven a pastilla con su punto numerado delante. */ @media (max-width:600px){ #sistema .e5__eco{width:100%;aspect-ratio:auto;margin-top:0;} #sistema .e5__f{width:auto;height:auto;gap:calc(.6 * var(--sys-u));padding:calc(.35 * var(--sys-u)) calc(1 * var(--sys-u)) calc(.35 * var(--sys-u)) calc(.35 * var(--sys-u)); border:1px solid var(--mk-line);border-radius:100px;} #sistema .e5__f b{flex:none;width:calc(2.6 * var(--sys-u));height:calc(2.6 * var(--sys-u));} #sistema .e5__f[data-r] em{position:static;transform:none;font-size:calc(1.3 * var(--sys-u));} } /* LAS FICHAS: TÍTULOS QUE SE ABREN ========================================= Cada título con más que contar lleva un «+» en el rojo de la voz de sistema: en la esquina si el título es una caja, detrás del texto si es un rótulo. Abierto, el «+» pasa a «−». La ficha la construye js/fichas.js. */ #sistema .tiene-ficha{cursor:pointer;} #sistema .tiene-ficha:focus-visible{outline:2px solid var(--mk-accent);outline-offset:3px;border-radius:calc(.8 * var(--sys-u));} #sistema .mkScene--board .mkNode.tiene-ficha{pointer-events:auto;} /* Cajas: «+» en la esquina, fuera del flujo, para no mover nada. */ #sistema .mkNode.tiene-ficha:not(.mkNode--core), #sistema .e1__filas > li.tiene-ficha, #sistema .e3__agentes > li.tiene-ficha, #sistema .e4__fuentes > li.tiene-ficha, #sistema .e5__vueltas > li.tiene-ficha{position:relative;} #sistema .mkNode.tiene-ficha:not(.mkNode--core)::after, #sistema .e1__filas > li.tiene-ficha::after, #sistema .e3__agentes > li.tiene-ficha::after, #sistema .e4__fuentes > li.tiene-ficha::after, #sistema .e5__vueltas > li.tiene-ficha::after{content:"+";position:absolute;top:calc(.45 * var(--sys-u));right:calc(.45 * var(--sys-u)); display:grid;place-items:center;width:calc(1.5 * var(--sys-u));height:calc(1.5 * var(--sys-u));border-radius:50%; border:1px solid var(--mk-accent-soft);color:var(--mk-accent);font-size:calc(1.1 * var(--sys-u));font-weight:500;line-height:1;} /* Rótulos: «+» detrás del texto, en línea. */ #sistema .lzK.tiene-ficha::after, #sistema .e3__banco__k.tiene-ficha::after, #sistema .e1__obj__k.tiene-ficha::after, #sistema .e1__hitos > li.tiene-ficha::after, #sistema .e2__salidas > li > b.tiene-ficha::after, #sistema .mkNode--core.tiene-ficha b::after, #sistema .e4__agente.tiene-ficha b::after, #sistema .e5__nucleo.tiene-ficha b::after, #sistema .e5__f.tiene-ficha em::after{content:"+";display:inline-grid;place-items:center;width:1.35em;height:1.35em;margin-left:.45em; vertical-align:.08em;border-radius:50%;border:1px solid var(--mk-accent-soft);color:var(--mk-accent); font-size:.78em;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;} /* Hover y abierto, SÓLO sobre los «+» que existen. Con un `b::after` genérico, al abrir una fila salía un «−» rojo detrás de cada negrita y cada cursiva de dentro, y el núcleo o el agente ganaban un «−» suelto como pieza de más. */ #sistema .mkNode.tiene-ficha:not(.mkNode--core):hover::after, #sistema .e1__filas > li.tiene-ficha:hover::after, #sistema .e3__agentes > li.tiene-ficha:hover::after, #sistema .e4__fuentes > li.tiene-ficha:hover::after, #sistema .e5__vueltas > li.tiene-ficha:hover::after, #sistema .lzK.tiene-ficha:hover::after, #sistema .e3__banco__k.tiene-ficha:hover::after, #sistema .e1__obj__k.tiene-ficha:hover::after, #sistema .e1__hitos > li.tiene-ficha:hover::after, #sistema .e2__salidas > li > b.tiene-ficha:hover::after, #sistema .mkNode--core.tiene-ficha:hover b::after, #sistema .e4__agente.tiene-ficha:hover b::after, #sistema .e5__nucleo.tiene-ficha:hover b::after, #sistema .e5__f.tiene-ficha:hover em::after{border-color:var(--mk-accent);} #sistema .mkNode.tiene-ficha:not(.mkNode--core)[aria-expanded="true"]::after, #sistema .e1__filas > li.tiene-ficha[aria-expanded="true"]::after, #sistema .e3__agentes > li.tiene-ficha[aria-expanded="true"]::after, #sistema .e4__fuentes > li.tiene-ficha[aria-expanded="true"]::after, #sistema .e5__vueltas > li.tiene-ficha[aria-expanded="true"]::after, #sistema .lzK.tiene-ficha[aria-expanded="true"]::after, #sistema .e3__banco__k.tiene-ficha[aria-expanded="true"]::after, #sistema .e1__obj__k.tiene-ficha[aria-expanded="true"]::after, #sistema .e1__hitos > li.tiene-ficha[aria-expanded="true"]::after, #sistema .e2__salidas > li > b.tiene-ficha[aria-expanded="true"]::after, #sistema .mkNode--core.tiene-ficha[aria-expanded="true"] b::after, #sistema .e4__agente.tiene-ficha[aria-expanded="true"] b::after, #sistema .e5__nucleo.tiene-ficha[aria-expanded="true"] b::after, #sistema .e5__f.tiene-ficha[aria-expanded="true"] em::after{content:"−";background:var(--mk-accent);border-color:var(--mk-accent);color:#fff;} /* La ficha flota sobre la escena. Es la única pieza de la sección con fondo: es una capa de lectura encima del 3D, no un gráfico, y sin él el texto quedaría sobre las esquirlas. Cristal oscuro con desenfoque, borde rojo. La ficha no se desplaza: lo hace `.ficha__dentro`, para que la flecha, que asoma por fuera, no cuente como desbordamiento. */ #sistema .sys__ancla{position:relative;} #sistema .sys--recorrido .sys__ancla{position:sticky;} #sistema .ficha__dentro{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:var(--mk-accent-soft) transparent;} #sistema .ficha{position:absolute;z-index:40;box-sizing:border-box;width:min(calc(36 * var(--u0)), calc(100% - 24px));display:flex;flex-direction:column;overflow:visible; padding:calc(1.8 * var(--u0)) calc(2 * var(--u0)) calc(2 * var(--u0));border:1px solid var(--mk-accent-soft);border-radius:calc(1.6 * var(--u0)); background:rgba(10,7,7,.62);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15); box-shadow:0 calc(3 * var(--u0)) calc(8 * var(--u0)) rgba(0,0,0,.5);color:#fff;text-align:left; opacity:0;transform:translateY(6px);transition:opacity .22s var(--mk-in),transform .22s var(--mk-in);} #sistema .ficha[data-lado="arriba"]{transform:translateY(-6px);} #sistema .ficha.is-abierta{opacity:1;transform:none;} #sistema .ficha:focus{outline:none;} #sistema .ficha__cerrar{position:absolute;top:calc(.8 * var(--u0));right:calc(.8 * var(--u0));display:grid;place-items:center; width:calc(3 * var(--u0));height:calc(3 * var(--u0));border-radius:50%;border:1px solid var(--mk-line);background:none;color:#fff; font:inherit;font-size:calc(1.8 * var(--u0));line-height:1;cursor:pointer;} #sistema .ficha__cerrar:hover, #sistema .ficha__cerrar:focus-visible{border-color:var(--mk-accent);color:var(--mk-accent);outline:none;} /* Y CON EL DEDO. La cruz mide 30 px, que es de las cosas más pequeñas que se piden pulsar en toda la web, y es el control de cerrar de un panel que en un teléfono ocupa media pantalla. La zona crece a 44; el círculo se queda en su tamaño, dibujado por dentro, para no engordar la esquina de la ficha. */ @media (hover: none) { #sistema .ficha__cerrar{ width:44px;height:44px;border:0; top:calc(.8 * var(--u0) - (44px - 3 * var(--u0)) / 2); right:calc(.8 * var(--u0) - (44px - 3 * var(--u0)) / 2); } #sistema .ficha__cerrar::before{ content:"";position:absolute;width:calc(3 * var(--u0));height:calc(3 * var(--u0)); border-radius:50%;border:1px solid var(--mk-line); } #sistema .ficha__cerrar:hover::before, #sistema .ficha__cerrar:focus-visible::before{border-color:var(--mk-accent);} } /* La cruz por encima del medio. La ficha con imagen la dibujaba después, y en una de las 38 el `elementFromPoint` del centro del botón contestaba `IMG`: la foto se comía el único control de cerrar. */ #sistema .ficha__cerrar{z-index:2;} #sistema .ficha__medio{margin:0 0 calc(1.4 * var(--u0));border-radius:calc(1 * var(--u0));overflow:hidden;aspect-ratio:16 / 9;max-height:min(26svh, calc(20 * var(--u0)));} #sistema .ficha__medio[hidden]{display:none;} #sistema .ficha__medio video, #sistema .ficha__medio img{display:block;width:100%;height:100%;object-fit:cover;} #sistema .ficha__fase{margin:0 calc(3.5 * var(--u0)) calc(.5 * var(--u0)) 0;font-size:calc(1.15 * var(--u0));font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-accent);} #sistema .ficha__t{margin:0 calc(3.5 * var(--u0)) calc(.8 * var(--u0)) 0;font-size:calc(2.6 * var(--u0));font-weight:500;line-height:1.08;letter-spacing:-.01em;} #sistema .ficha__r{margin:0 0 calc(.8 * var(--u0));font-size:calc(1.7 * var(--u0));line-height:1.35;} #sistema .ficha__c{margin:0 0 calc(1.2 * var(--u0));font-size:calc(1.45 * var(--u0));line-height:1.5;color:var(--mk-muted);} #sistema .ficha__p{list-style:none;margin:0;padding:calc(1.1 * var(--u0)) 0 0;border-top:1px solid var(--mk-line);display:grid;gap:calc(.6 * var(--u0));} #sistema .ficha__p li{position:relative;padding-left:calc(1.6 * var(--u0));font-size:calc(1.35 * var(--u0));line-height:1.35;} #sistema .ficha__p li::before{content:"";position:absolute;left:0;top:.5em;width:calc(.65 * var(--u0));height:calc(.65 * var(--u0));border-radius:50%;background:var(--mk-accent);} /* Flecha hacia el título que la abrió. */ #sistema .ficha::before{content:"";position:absolute;left:var(--flecha, 50%);width:10px;height:10px;transform:translateX(-50%) rotate(45deg); border:1px solid var(--mk-accent-soft);background:rgba(10,7,7,.9);} #sistema .ficha[data-lado="abajo"]::before{top:-6px;border-right:0;border-bottom:0;} #sistema .ficha[data-lado="arriba"]::before{bottom:-6px;border-left:0;border-top:0;} #sistema .ficha[data-lado="encima"]::before{display:none;} @media (max-width:600px){ #sistema .ficha{width:calc(100% - 24px);padding:calc(1.6 * var(--u0));} #sistema .ficha__t{font-size:calc(2.2 * var(--u0));} } @media (prefers-reduced-motion:reduce){ #sistema .ficha{transition:none;} } /* Cerrada NO ocupa sitio. `display:flex` de arriba pisa el `[hidden]` del navegador: la ficha se quedaba invisible pero en su sitio, y se tragaba los clics de lo que tuviera debajo —Atención, Reservas, Dudas, Web—. */ #sistema .ficha[hidden]{display:none;} #sistema .ficha:not(.is-abierta){pointer-events:none;} /* LAS IMÁGENES DE LAS FICHAS ================================================ Foto o vídeo del portfolio donde hay trabajo real que lo enseña; donde el tema es abstracto, una ilustración animada en la línea de la sección —trazo blanco, acento rojo, sin fondo— que se repite como un GIF. Las piezas las define js/fichas-visuales.js; aquí sólo el lenguaje común. */ #sistema .ficha__medio[data-tipo="svg"]{border:1px solid var(--mk-line);} #sistema .ficha__medio svg.fv{display:block;width:100%;height:100%;overflow:visible;} #sistema .fv *{transform-box:fill-box;transform-origin:center;} #sistema .fv-l{fill:none;stroke:rgba(255,255,255,.62);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} #sistema .fv-t{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;} #sistema .fv-a{fill:none;stroke:var(--mk-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} #sistema .fv-f{fill:var(--mk-accent);} #sistema .fv-w{fill:#fff;} #sistema .fv-g{fill:rgba(255,255,255,.3);} #sistema .fv-txt{fill:#fff;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.08em;} #sistema .fv-q{fill:#fff;font-family:inherit;font-size:36px;font-weight:500;} #sistema .fv-aparece{opacity:0;animation:fvAparece 4s var(--mk-ease) infinite;animation-delay:calc(var(--d,0) * .3s);} #sistema .fv-latido{animation:fvLatido 1.8s ease-in-out infinite;animation-delay:calc(var(--d,0) * .25s);} #sistema .fv-sube{transform-origin:50% 100%;animation:fvSube 2.4s var(--mk-ease) infinite alternate;animation-delay:calc(var(--d,0) * .18s);} #sistema .fv-barra{animation:fvBarra 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--d,0) * -.13s);} #sistema .fv-dibuja{stroke-dasharray:100;stroke-dashoffset:100;animation:fvDibuja 3.6s var(--mk-ease) infinite;} #sistema .fv-fluye{stroke-dasharray:5 9;animation:fvFluye 1s linear infinite;} #sistema .fv-onda{animation:fvOnda 2.4s ease-out infinite;animation-delay:calc(var(--d,0) * .8s);} #sistema .fv-destaca{animation:fvDestaca 3s var(--mk-ease) infinite;} #sistema .fv-iza{animation:fvIza 3.6s var(--mk-ease) infinite;} #sistema .fv-menos{stroke-dasharray:100;animation:fvMenos 4s ease-in-out infinite;} #sistema .fv-pantalla{opacity:0;animation:fvPantalla 7.5s ease infinite;animation-delay:calc(var(--d,0) * 2.5s);} #sistema .fv-mosaico{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;width:100%;height:100%;} #sistema .fv-mosaico img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;opacity:0; animation:fvEntra .5s var(--mk-in) forwards;animation-delay:calc(var(--d,0) * .12s);} @keyframes fvAparece{0%{opacity:0;transform:translateY(4px)}12%,78%{opacity:1;transform:none}92%,100%{opacity:0}} @keyframes fvLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}} @keyframes fvSube{from{transform:scaleY(.3)}to{transform:scaleY(1)}} @keyframes fvBarra{from{transform:scaleY(.25)}to{transform:scaleY(1)}} @keyframes fvDibuja{0%{stroke-dashoffset:100;opacity:1}45%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} @keyframes fvFluye{to{stroke-dashoffset:-14}} @keyframes fvOnda{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}} @keyframes fvDestaca{0%,15%,85%,100%{transform:none}35%,70%{transform:translateY(-10px) scale(1.55)}} @keyframes fvIza{0%{transform:translateY(70px);opacity:0}10%{opacity:1}45%,85%{transform:none;opacity:1}100%{transform:none;opacity:0}} @keyframes fvMenos{0%,15%{stroke-dashoffset:0}65%,100%{stroke-dashoffset:60}} @keyframes fvPantalla{0%{opacity:0}4%,30%{opacity:1}34%,100%{opacity:0}} @keyframes fvEntra{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ #sistema .fv *, #sistema .fv-mosaico img{animation:none !important;} #sistema .fv-aparece, #sistema .fv-pantalla:first-of-type, #sistema .fv-mosaico img{opacity:1 !important;} #sistema .fv-dibuja{stroke-dashoffset:0 !important;} } /* Los tres keyframes que el filtro de nombres dejó fuera. */ @keyframes escNum{from{opacity:0;transform:translateX(40px)}to{opacity:.07;transform:none}} @keyframes mqEntra{to{opacity:1;transform:none}} @keyframes mqReproduce{from{width:0}to{width:100%}} /* Un solo peso de énfasis: 500. Sin esto `b` pide bolder y el navegador engorda el 500 a mano. */ #sistema b, #sistema strong { font-weight: 500; } /* Los tres chips de fuentes se ponían en fila sin poder encoger y el último se salía 75 px del cuadro en 375. Que envuelvan y que puedan estrecharse. */ @media (max-width: 960px) { #sistema .e4__fuentes { flex-wrap: wrap; } #sistema .e4__fuentes li { flex: 1 1 0; min-width: 0; } #sistema .e4__fuentes li span, #sistema .e4__fuentes li b { min-width: 0; overflow-wrap: anywhere; } } /* Y EN TELÉFONO NO CABEN TRES EN FILA, PUNTO. El `overflow-wrap: anywhere` de arriba quitó el desbordamiento pero fabricó algo peor: a 375 px cada chip se queda con unos 30 px libres después del icono y del acolchado, así que las palabras se partían LETRA A LETRA — «Cl / ie / nt / es»—. Eso no es texto envuelto, es texto roto, y es lo que se veía en la captura. Partir por dentro de la palabra es un último recurso para una URL o un identificador sin espacios, no para tres sustantivos de una sílaba larga. La salida correcta no es apretar más: es dejar de meter tres cosas donde caben una. Apilados, cada palabra entra en su línea con sitio de sobra, y el chip gana además el ancho para que se lea el icono junto al rótulo. `overflow-wrap: normal` se repone a propósito: si algún día vuelve a no caber algo, que se vea que no cabe en vez de salir troceado. */ @media (max-width: 600px) { #sistema .e4__fuentes { flex-direction: column; flex-wrap: nowrap; } #sistema .e4__fuentes li { flex: 0 0 auto; width: 100%; } #sistema .e4__fuentes li span, #sistema .e4__fuentes li b { overflow-wrap: normal; } } /* LAS VUELTAS SE PISABAN UNAS A OTRAS. La tarjeta lleva `flex: 1 1 0` para repartirse el ancho cuando las tres van en fila. Al pasar a columna por debajo de 960 ese mismo `flex` las obliga a repartirse el ALTO: se quedaban en 44 px cuando su contenido mide 95, y la cifra y la propuesta se salían por abajo y aterrizaban encima del rótulo de la vuelta siguiente. Medido a 375 px: 44 px de caja para 70 px de texto. En columna cada tarjeta vale lo que mide su contenido. Pasan de 44 a 104 px y dejan de tocarse. */ @media (max-width: 960px) { #sistema .e5__vueltas li { flex: 0 0 auto; } } /* LOS CINCO CANALES, EN UNA FILA Y NO EN CUATRO MÁS UNO. Con `flex-wrap` cada icono pedía su ancho fijo: cinco de 65 px más los huecos son 371 y la columna mide 335, así que el quinto caía a una segunda fila él solo, centrado y descolgado. Parecía un error de carga, no una rejilla. Rejilla de cinco columnas iguales: cada icono se queda en 58 px, que sigue siendo cómodo para el dedo, y la fila lee como lo que es —los canales donde publican los agentes— en vez de como una lista que no cupo. */ @media (max-width: 600px) { #sistema .e3__redes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } #sistema .e3__redes li { width: auto; } /* SE PROBÓ, ADEMÁS, sacar el «+» del núcleo a la esquina: en 375 px el titular parte en dos y el «+» queda colgando detrás de «marca», a media frase. Pero al volverlo absoluto sale del flujo, el nodo central deja de aportar su ancho a las dos columnas que cruza y la rejilla entera se desplaza 109 px a la izquierda: medido, las tarjetas pasaban de empezar en x62 a empezar en x-47, con la columna izquierda cortada por el canto del tablero. El «+» en línea es feo en dos renglones; la rejilla rota es un fallo. Se queda como está. */ }