/* Kudenix Pasos — Scoped under .kudenix-steps CSS trasladado de kudenixgo.html, sección comp-ma2jx6pt. Los selectores por id —tanto #comp-x como [id="comp-x"]— pasan a clase, porque el markup conserva esas clases y no los atributos id; el resto de las declaraciones queda intacto. */ /* Familias que nombran los estilos inline del markup, con los archivos del documento. Sin esto el navegador cae en sus fuentes por defecto. */ @font-face { font-family: 'wf_69da26c8d3244babbb98ee6cf'; src: url('../fonts/file-c7e521c1.woff2') format('woff2'), url('../fonts/file-cce0db83.woff') format('woff'); font-display: swap; } @font-face { font-family: 'helvetica-w01-roman'; src: url('../fonts/helvetica-roman.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'helvetica-w01-bold'; src: url('../fonts/helvetica-bold.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'wfont_5074c3_69da26c8d3244babbb98ee6cfb7ba125'; src: url('../fonts/file-c7e521c1.woff2') format('woff2'); font-display: swap; } .kudenix-steps .sFiSiq { width:100%;height:100%;display:block } .kudenix-steps .QG9w8P { width:100%;height:100%;-webkit-mask-image:var(--mask-image,none);mask-image:var(--mask-image,none);-webkit-mask-position:var(--mask-position,0);mask-position:var(--mask-position,0);-webkit-mask-size:var(--mask-size,100%);mask-size:var(--mask-size,100%);-webkit-mask-repeat:var(--mask-repeat,no-repeat);mask-repeat:var(--mask-repeat,no-repeat);pointer-events:var(--fill-layer-background-media-pointer-events);position:absolute;top:0;left:0;overflow:hidden } .kudenix-steps .QG9w8P.WIIr02 { clip:rect(0px,auto,auto,0px) } .kudenix-steps .QG9w8P .ayCf9D { width:100%;height:100%;position:absolute;top:0 } .kudenix-steps .QG9w8P .fO4mKs { opacity:var(--fill-layer-image-opacity);height:var(--fill-layer-image-height,100%) } .kudenix-steps .QG9w8P .fO4mKs img { width:100%;height:100% } .kudenix-steps .QG9w8P.WIIr02 { clip:auto;-webkit-clip-path:inset(0) } .kudenix-steps .ROWgFb { height:100% } .kudenix-steps .LNYVZi { background-color:var(--bg-overlay-color);background-image:var(--bg-gradient);transition:var(--inherit-transition) } .kudenix-steps .FDI5TK { position:relative;overflow:visible } .kudenix-steps .apPOZK { box-sizing:border-box;width:100%;height:100% } .kudenix-steps .gRkIq0 { min-height:var(--image-min-height);min-width:var(--image-min-width) } .kudenix-steps .gRkIq0 img, .kudenix-steps img.gRkIq0 { object-position:var(--object-position);filter:var(--filter-effect-svg-url);-webkit-mask-image:var(--mask-image,none);mask-image:var(--mask-image,none);-webkit-mask-position:var(--mask-position,0);mask-position:var(--mask-position,0);-webkit-mask-size:var(--mask-size,100% 100%);mask-size:var(--mask-size,100% 100%);-webkit-mask-repeat:var(--mask-repeat,no-repeat);mask-repeat:var(--mask-repeat,no-repeat) } .kudenix-steps .W4V2qg { position:var(--position-fixed,static);left:var(--left,auto);top:var(--top,auto);z-index:var(--z-index,auto) } .kudenix-steps .W4V2qg .gRkIq0 img { -webkit-user-select:none;user-select:none;position:static;box-shadow:0 0 #000 } .kudenix-steps .W4V2qg .apPOZK { display:block;overflow:hidden } .kudenix-steps .W4V2qg .gRkIq0 { overflow:hidden } .kudenix-steps ._v6ohL>*>:first-child { vertical-align:top } .kudenix-steps ._v6ohL [data-attr-richtext-marker=true] { display:block } .kudenix-steps ._v6ohL [data-attr-richtext-marker=true] table { border-collapse:collapse;width:100%;margin:15px 0 } .kudenix-steps ._v6ohL [data-attr-richtext-marker=true] table td { padding:12px;position:relative } .kudenix-steps ._v6ohL [data-attr-richtext-marker=true] table td:after { content:"";opacity:.2;border-bottom:1px solid;border-left:1px solid;position:absolute;inset:0 } .kudenix-steps ._v6ohL [data-attr-richtext-marker=true] table tr td:last-child:after { border-right:1px solid } .kudenix-steps ._v6ohL [data-attr-richtext-marker=true] table tr:first-child td:after { border-top:1px solid } .kudenix-steps .N8MGzv, .kudenix-steps .UwkEpO { word-wrap:break-word;overflow-wrap:break-word;text-align:start;pointer-events:none;min-height:var(--min-height);min-width:var(--min-width);direction:var(--text-direction);mix-blend-mode:var(--blendMode,normal);text-transform:var(--textTransform,"none");text-shadow:var(--textOutline,0px 0px transparent),var(--textShadow,0px 0px transparent) } .kudenix-steps .N8MGzv>*, .kudenix-steps .UwkEpO>* { pointer-events:auto } .kudenix-steps .N8MGzv li, .kudenix-steps .UwkEpO li { font-style:inherit;font-weight:inherit;line-height:inherit;letter-spacing:normal } .kudenix-steps .N8MGzv ol, .kudenix-steps .UwkEpO ol, .kudenix-steps .N8MGzv ul, .kudenix-steps .UwkEpO ul { letter-spacing:normal;margin-inline:.5em 0;line-height:normal } .kudenix-steps .N8MGzv:not(.PO9MfV) ol, .kudenix-steps .UwkEpO:not(.PO9MfV) ol, .kudenix-steps .N8MGzv:not(.PO9MfV) ul, .kudenix-steps .UwkEpO:not(.PO9MfV) ul { padding-inline:1.3em 0 } .kudenix-steps .N8MGzv ul, .kudenix-steps .UwkEpO ul { list-style-type:disc } .kudenix-steps .N8MGzv ol, .kudenix-steps .UwkEpO ol { list-style-type:decimal } .kudenix-steps .N8MGzv ul ul, .kudenix-steps .UwkEpO ul ul, .kudenix-steps .N8MGzv ol ul, .kudenix-steps .UwkEpO ol ul { list-style-type:circle } .kudenix-steps .N8MGzv ul ul ul, .kudenix-steps .UwkEpO ul ul ul, .kudenix-steps .N8MGzv ol ul ul, .kudenix-steps .UwkEpO ol ul ul, .kudenix-steps .N8MGzv ul ol ul, .kudenix-steps .UwkEpO ul ol ul, .kudenix-steps .N8MGzv ol ol ul, .kudenix-steps .UwkEpO ol ol ul { list-style-type:square } .kudenix-steps .N8MGzv p, .kudenix-steps .UwkEpO p, .kudenix-steps .N8MGzv h1, .kudenix-steps .UwkEpO h1, .kudenix-steps .N8MGzv h2, .kudenix-steps .UwkEpO h2, .kudenix-steps .N8MGzv h3, .kudenix-steps .UwkEpO h3, .kudenix-steps .N8MGzv h4, .kudenix-steps .UwkEpO h4, .kudenix-steps .N8MGzv h5, .kudenix-steps .UwkEpO h5, .kudenix-steps .N8MGzv h6, .kudenix-steps .UwkEpO h6, .kudenix-steps .N8MGzv blockquote, .kudenix-steps .UwkEpO blockquote, .kudenix-steps .N8MGzv div, .kudenix-steps .UwkEpO div { margin-block:0;margin:0 } .kudenix-steps .N8MGzv a, .kudenix-steps .UwkEpO a { color:inherit } .kudenix-steps .PO9MfV li { margin-inline:1.3em 0 } .kudenix-steps .nJiBti { box-sizing:border-box;border-top:var(--lnw,2px)solid rgba(var(--brd,var(--color_15,color_15)),var(--alpha-brd,1));height:0 } .kudenix-steps .Le88gL { overflow:visible } .kudenix-steps .Le88gL>.QG9w8P .LNYVZi { background-color:var(--section-corvid-background-color,var(--bg-overlay-color)) } .kudenix-steps .Exmq9 { direction:var(--direction);justify-content:var(--justify-content);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);flex-wrap:wrap;display:flex;position:relative } .kudenix-steps .Exmq9:not(:-webkit-any(:lang(ae), .kudenix-steps :lang(ar), .kudenix-steps :lang(arc), .kudenix-steps :lang(bcc), .kudenix-steps :lang(bqi), .kudenix-steps :lang(ckb), .kudenix-steps :lang(dv), .kudenix-steps :lang(fa), .kudenix-steps :lang(glk), .kudenix-steps :lang(he), .kudenix-steps :lang(ku), .kudenix-steps :lang(mzn), .kudenix-steps :lang(nqo), .kudenix-steps :lang(pnb), .kudenix-steps :lang(ps), .kudenix-steps :lang(sd), .kudenix-steps :lang(ug), .kudenix-steps :lang(ur), .kudenix-steps :lang(yi))) { margin-left:var(--margin-inline-start);margin-right:var(--margin-inline-end) } .kudenix-steps .Exmq9:not(:-moz-any(:lang(ae), .kudenix-steps :lang(ar), .kudenix-steps :lang(arc), .kudenix-steps :lang(bcc), .kudenix-steps :lang(bqi), .kudenix-steps :lang(ckb), .kudenix-steps :lang(dv), .kudenix-steps :lang(fa), .kudenix-steps :lang(glk), .kudenix-steps :lang(he), .kudenix-steps :lang(ku), .kudenix-steps :lang(mzn), .kudenix-steps :lang(nqo), .kudenix-steps :lang(pnb), .kudenix-steps :lang(ps), .kudenix-steps :lang(sd), .kudenix-steps :lang(ug), .kudenix-steps :lang(ur), .kudenix-steps :lang(yi))) { margin-left:var(--margin-inline-start);margin-right:var(--margin-inline-end) } .kudenix-steps .Exmq9:not(:is(:lang(ae), .kudenix-steps :lang(ar), .kudenix-steps :lang(arc), .kudenix-steps :lang(bcc), .kudenix-steps :lang(bqi), .kudenix-steps :lang(ckb), .kudenix-steps :lang(dv), .kudenix-steps :lang(fa), .kudenix-steps :lang(glk), .kudenix-steps :lang(he), .kudenix-steps :lang(ku), .kudenix-steps :lang(mzn), .kudenix-steps :lang(nqo), .kudenix-steps :lang(pnb), .kudenix-steps :lang(ps), .kudenix-steps :lang(sd), .kudenix-steps :lang(ug), .kudenix-steps :lang(ur), .kudenix-steps :lang(yi))) { margin-left:var(--margin-inline-start);margin-right:var(--margin-inline-end) } .kudenix-steps .Exmq9:-webkit-any(:lang(ae), .kudenix-steps :lang(ar), .kudenix-steps :lang(arc), .kudenix-steps :lang(bcc), .kudenix-steps :lang(bqi), .kudenix-steps :lang(ckb), .kudenix-steps :lang(dv), .kudenix-steps :lang(fa), .kudenix-steps :lang(glk), .kudenix-steps :lang(he), .kudenix-steps :lang(ku), .kudenix-steps :lang(mzn), .kudenix-steps :lang(nqo), .kudenix-steps :lang(pnb), .kudenix-steps :lang(ps), .kudenix-steps :lang(sd), .kudenix-steps :lang(ug), .kudenix-steps :lang(ur), .kudenix-steps :lang(yi)) { margin-right:var(--margin-inline-start);margin-left:var(--margin-inline-end) } .kudenix-steps .Exmq9:-moz-any(:lang(ae), .kudenix-steps :lang(ar), .kudenix-steps :lang(arc), .kudenix-steps :lang(bcc), .kudenix-steps :lang(bqi), .kudenix-steps :lang(ckb), .kudenix-steps :lang(dv), .kudenix-steps :lang(fa), .kudenix-steps :lang(glk), .kudenix-steps :lang(he), .kudenix-steps :lang(ku), .kudenix-steps :lang(mzn), .kudenix-steps :lang(nqo), .kudenix-steps :lang(pnb), .kudenix-steps :lang(ps), .kudenix-steps :lang(sd), .kudenix-steps :lang(ug), .kudenix-steps :lang(ur), .kudenix-steps :lang(yi)) { margin-right:var(--margin-inline-start);margin-left:var(--margin-inline-end) } .kudenix-steps .Exmq9:is(:lang(ae), .kudenix-steps :lang(ar), .kudenix-steps :lang(arc), .kudenix-steps :lang(bcc), .kudenix-steps :lang(bqi), .kudenix-steps :lang(ckb), .kudenix-steps :lang(dv), .kudenix-steps :lang(fa), .kudenix-steps :lang(glk), .kudenix-steps :lang(he), .kudenix-steps :lang(ku), .kudenix-steps :lang(mzn), .kudenix-steps :lang(nqo), .kudenix-steps :lang(pnb), .kudenix-steps :lang(ps), .kudenix-steps :lang(sd), .kudenix-steps :lang(ug), .kudenix-steps :lang(ur), .kudenix-steps :lang(yi)) { margin-right:var(--margin-inline-start);margin-left:var(--margin-inline-end) } .kudenix-steps ._FiCX { margin:var(--item-margin);direction:ltr } .kudenix-steps .TmK0x { flex-direction:column;display:flex } .kudenix-steps .font_2 { font:var(--font_2);color:rgb(102, 102, 102);letter-spacing:0em; } .kudenix-steps .color_41 { color:rgb(var(--color_41)); } .kudenix-steps [data-mesh-id=Containerg83gdinlineContent-gridContainer] > .comp-ma2jx6pt, .kudenix-steps [data-mesh-id=Containerg83gdinlineContent-gridContainer] > interact-element > .comp-ma2jx6pt { position:relative;margin:0px 0px 0 calc((100% - 980px) * 0.5);left:0px;grid-area:6 / 1 / 7 / 2;justify-self:start;align-self:start; } .kudenix-steps .comp-ma2jx6pt { left:0;margin-left:0;width:100%;min-width:0; } .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent] { height:auto;width:100%; } .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] { position:static;display:grid;height:auto;width:100%;min-height:auto;grid-template-rows:repeat(7, min-content) 1fr;grid-template-columns:100%; } .kudenix-steps [data-mesh-id="comp-ma2jx6ra-rotated-wrapper"] > .comp-ma2jx6ra, .kudenix-steps [data-mesh-id="comp-ma2jx6ra-rotated-wrapper"] > interact-element > .comp-ma2jx6ra { position:relative;left:717px;top:0px; } .kudenix-steps [data-mesh-id="comp-mabgswtz-rotated-wrapper"] > .comp-mabgswtz, .kudenix-steps [data-mesh-id="comp-mabgswtz-rotated-wrapper"] > interact-element > .comp-mabgswtz { position:relative;left:6px;top:26px; } .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] > .comp-ma2jx6q0, .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] > interact-element > .comp-ma2jx6q0 { position:relative;margin:51px 0px 35px calc((100% - 980px) * 0.5);left:200px;grid-area:1 / 1 / 2 / 2;justify-self:start;align-self:start; } .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] > .comp-ma2jx6q3, .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] > interact-element > .comp-ma2jx6q3 { position:relative;margin:0px 0px 0px calc((100% - 980px) * 0.5);left:23px;grid-area:2 / 1 / 9 / 2;justify-self:start;align-self:start; } .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] > .comp-ma2jx6qz1, .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] > interact-element > .comp-ma2jx6qz1 { position:relative;margin:0px 0px 10px calc((100% - 980px) * 0.5);left:195px;grid-area:3 / 1 / 4 / 2;justify-self:start;align-self:start; } .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] > .comp-ma2jx6r11, .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-gridContainer] > interact-element > .comp-ma2jx6r11 { position:relative;margin:0px 0px 10px calc((100% - 980px) * 0.5);left:195px;grid-area:7 / 1 / 8 / 2;justify-self:start;align-self:start; } .kudenix-steps [data-mesh-id=comp-ma2jx6ra-rotated-wrapper] { position:static;height:76px;width:0;margin:0px 0px 10px calc((100% - 980px) * 0.5);grid-area:5 / 1 / 6 / 2;justify-self:start;align-self:start; } .kudenix-steps [data-mesh-id=comp-mabgswtz-rotated-wrapper] { position:static;height:272px;width:0;margin:57px 0px -40px calc((100% - 980px) * 0.5);grid-area:1 / 1 / 3 / 2;justify-self:start;align-self:start; } .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-wedge-5] { visibility:hidden;height:338px;width:0;grid-area:2 / 1 / 5 / 2; } .kudenix-steps [data-mesh-id=comp-ma2jx6ptinlineContent-wedge-7] { visibility:hidden;height:563px;width:0;grid-area:2 / 1 / 7 / 2; } .kudenix-steps .comp-ma2jx6q0 { --backgroundColor:0,0,0;--alpha-backgroundColor:0;--blendMode:normal;--textShadow:0px 0px transparent;--textOutline:0px 0px transparent; } .kudenix-steps .comp-ma2jx6q0 { width:580px;height:auto; } .kudenix-steps .comp-ma2jx6q3 { --brw:0px;--brd:50,65,88;--bg:61,155,233;--rd:0px;--shd:none;--gradient:none;--alpha-brd:0;--alpha-bg:0;--boxShadowToggleOn-shd:none;--bg-gradient:none; } .kudenix-steps .comp-ma2jx6q3 { width:922px; } .kudenix-steps .comp-ma2jx6q6:hover { transform:translateX(0)translateY(0)scaleX(1)scaleY(1)rotate(0deg)skewX(0deg)skewY(0deg);--comp-rotate-z:0deg; } .kudenix-steps .comp-ma2jx6q6 { width:468px; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc { --color:11,47,91;--alpha-color:1; } .kudenix-steps .comp-ma2jx6qc { --backgroundColor:0,0,0;--alpha-backgroundColor:0;--blendMode:normal;--textShadow:0px 0px transparent;--textOutline:0px 0px transparent; } .kudenix-steps .comp-ma2jx6qc:not(.is-animating) { transition:all 0.2s ease-in-out 0s, visibility 0s;--transition:all 0.2s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6qc:not(.is-animating) :not(.is-animating) { transition:all 0.2s ease-in-out 0s, visibility 0s;--transition:all 0.2s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc, .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc :not(.is-animating) { transition:all 0.4s ease-in-out 0s, visibility 0s;--transition:all 0.4s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc, .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc :not(.is-animating) :not(.is-animating) { transition:all 0.4s ease-in-out 0s, visibility 0s;--transition:all 0.4s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc { transform:translateX(0px)translateY(-11px)scaleX(1)scaleY(1)rotate(0deg)skewX(0deg)skewY(0deg);--comp-rotate-z:0deg; } .kudenix-steps .comp-ma2jx6qc { width:135px;height:auto; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql { --color:11,47,91;--alpha-color:1; } .kudenix-steps .comp-ma2jx6ql { --backgroundColor:0,0,0;--alpha-backgroundColor:0;--blendMode:normal;--textShadow:0px 0px transparent;--textOutline:0px 0px transparent; } .kudenix-steps .comp-ma2jx6ql:not(.is-animating) { transition:all 0.2s ease-in-out 0s, visibility 0s;--transition:all 0.2s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6ql:not(.is-animating) :not(.is-animating) { transition:all 0.2s ease-in-out 0s, visibility 0s;--transition:all 0.2s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql, .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql :not(.is-animating) { transition:all 0.4s ease-in-out 0s, visibility 0s;--transition:all 0.4s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql, .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql :not(.is-animating) :not(.is-animating) { transition:all 0.4s ease-in-out 0s, visibility 0s;--transition:all 0.4s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql { transform:translateX(0px)translateY(-11px)scaleX(1)scaleY(1)rotate(0deg)skewX(0deg)skewY(0deg);--comp-rotate-z:0deg; } .kudenix-steps .comp-ma2jx6ql { width:334px;height:auto; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo { --color:11,47,91;--alpha-color:1; } .kudenix-steps .comp-ma2jx6qo { --backgroundColor:0,0,0;--alpha-backgroundColor:0;--blendMode:normal;--textShadow:0px 0px transparent;--textOutline:0px 0px transparent; } .kudenix-steps .comp-ma2jx6qo:not(.is-animating) { transition:all 0.2s ease-in-out 0s, visibility 0s;--transition:all 0.2s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6qo:not(.is-animating) :not(.is-animating) { transition:all 0.2s ease-in-out 0s, visibility 0s;--transition:all 0.2s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo, .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo :not(.is-animating) { transition:all 0.4s ease-in-out 0s, visibility 0s;--transition:all 0.4s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo, .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo :not(.is-animating) :not(.is-animating) { transition:all 0.4s ease-in-out 0s, visibility 0s;--transition:all 0.4s ease-in-out 0s, visibility 0s; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo { transform:translateX(0px)translateY(-11px)scaleX(1)scaleY(1)rotate(0deg)skewX(0deg)skewY(0deg);--comp-rotate-z:0deg; } .kudenix-steps .comp-ma2jx6qo { width:274px;height:auto; } .kudenix-steps .comp-ma2jx6qr { --lnw:3px;--brd:var(--color_38);--alpha-brd:1; } .kudenix-steps .comp-ma2jx6qr { width:450px;height:6px; } .kudenix-steps .comp-ma2jx6qz1 { --contentPaddingLeft:0px;--contentPaddingRight:0px;--contentPaddingTop:0px;--contentPaddingBottom:0px; } .kudenix-steps .comp-ma2jx6qz1 { width:76px;height:76px; } .kudenix-steps .comp-ma2jx6r11 { --contentPaddingLeft:0px;--contentPaddingRight:0px;--contentPaddingTop:0px;--contentPaddingBottom:0px; } .kudenix-steps .comp-ma2jx6r11 { width:76px;height:76px; } .kudenix-steps .comp-ma2jx6ra { --contentPaddingLeft:0px;--contentPaddingRight:0px;--contentPaddingTop:0px;--contentPaddingBottom:0px; } .kudenix-steps .comp-ma2jx6ra { width:76px;height:76px;transform:rotate(90deg);--comp-rotate-z:90deg; } .kudenix-steps .comp-mabgswtz { --contentPaddingLeft:0px;--contentPaddingRight:0px;--contentPaddingTop:0px;--contentPaddingBottom:0px; } .kudenix-steps .comp-mabgswtz { width:162px;height:221px;transform:rotate(44.39296382436913deg);--comp-rotate-z:44.39296382436913deg; } .kudenix-steps .comp-ma2jx6pt { --bg-overlay-color:rgb(var(--color_36));--bg-gradient:none;min-width:980px; } .kudenix-steps .comp-ma2jx6q0 { --text-direction:var(--wix-opt-in-direction); } .kudenix-steps .comp-ma2jx6q3 { --direction:var(--wix-opt-in-direction);--justify-content:center;--item-margin:0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-inline-start:0px;--margin-inline-end:0px; } .kudenix-steps .comp-ma2jx6q6 { --scale:1;--bg-overlay-color:transparent;--bg-gradient:none;border-width:0 0 0 0;border-style:solid solid solid solid;border-color:rgba(176, 169, 134, 1) rgba(176, 169, 134, 1) rgba(176, 169, 134, 1) rgba(176, 169, 134, 1);border-radius:0 0 0 0;overflow:clip !important;transform:translateZ(0);margin:-0px; } .kudenix-steps .comp-ma2jx6q6__item-j9ples3e { --bg-overlay-color:transparent;--bg-gradient:none;border-width:0 0 0 0;border-style:solid solid solid solid;border-color:rgba(176, 169, 134, 1) rgba(176, 169, 134, 1) rgba(176, 169, 134, 1) rgba(176, 169, 134, 1);border-radius:0 0 0 0;overflow:clip !important;transform:translateZ(0);margin:-0px; } .kudenix-steps .comp-ma2jx6q6__item-j9plerjk { --bg-overlay-color:transparent;--bg-gradient:none;border-width:0 0 0 0;border-style:solid solid solid solid;border-color:rgba(176, 169, 134, 1) rgba(176, 169, 134, 1) rgba(176, 169, 134, 1) rgba(176, 169, 134, 1);border-radius:0 0 0 0;overflow:clip !important;transform:translateZ(0);margin:-0px; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc { --min-height:113px;--text-direction:var(--wix-opt-in-direction); } .kudenix-steps .comp-ma2jx6qc { --min-height:113px;--text-direction:var(--wix-opt-in-direction); } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc :is(p, .kudenix-steps h1, .kudenix-steps h2, .kudenix-steps h3, .kudenix-steps h4, .kudenix-steps h5, .kudenix-steps h6, .kudenix-steps ul, .kudenix-steps ol, .kudenix-steps span, .kudenix-steps blockquote, .kudenix-steps div) { color:#0B2F5B !important; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qc [class$=rich-text__text]:is(p, .kudenix-steps h1, .kudenix-steps h2, .kudenix-steps h3, .kudenix-steps h4, .kudenix-steps h5, .kudenix-steps h6, .kudenix-steps ul, .kudenix-steps ol, .kudenix-steps span[data-attr-richtext-marker], .kudenix-steps blockquote, .kudenix-steps div) { color:var(--corvid-color, #0B2F5B) !important; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql { --text-direction:var(--wix-opt-in-direction); } .kudenix-steps .comp-ma2jx6ql { --text-direction:var(--wix-opt-in-direction); } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql :is(p, .kudenix-steps h1, .kudenix-steps h2, .kudenix-steps h3, .kudenix-steps h4, .kudenix-steps h5, .kudenix-steps h6, .kudenix-steps ul, .kudenix-steps ol, .kudenix-steps span, .kudenix-steps blockquote, .kudenix-steps div) { color:#0B2F5B !important; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6ql [class$=rich-text__text]:is(p, .kudenix-steps h1, .kudenix-steps h2, .kudenix-steps h3, .kudenix-steps h4, .kudenix-steps h5, .kudenix-steps h6, .kudenix-steps ul, .kudenix-steps ol, .kudenix-steps span[data-attr-richtext-marker], .kudenix-steps blockquote, .kudenix-steps div) { color:var(--corvid-color, #0B2F5B) !important; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo { --min-height:45px;--text-direction:var(--wix-opt-in-direction); } .kudenix-steps .comp-ma2jx6qo { --min-height:45px;--text-direction:var(--wix-opt-in-direction); } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo :is(p, .kudenix-steps h1, .kudenix-steps h2, .kudenix-steps h3, .kudenix-steps h4, .kudenix-steps h5, .kudenix-steps h6, .kudenix-steps ul, .kudenix-steps ol, .kudenix-steps span, .kudenix-steps blockquote, .kudenix-steps div) { color:#0B2F5B !important; } .kudenix-steps .comp-ma2jx6q6:hover .comp-ma2jx6qo [class$=rich-text__text]:is(p, .kudenix-steps h1, .kudenix-steps h2, .kudenix-steps h3, .kudenix-steps h4, .kudenix-steps h5, .kudenix-steps h6, .kudenix-steps ul, .kudenix-steps ol, .kudenix-steps span[data-attr-richtext-marker], .kudenix-steps blockquote, .kudenix-steps div) { color:var(--corvid-color, #0B2F5B) !important; } .kudenix-steps .comp-ma2jx6qr { transform-origin:center 1.5px; } .kudenix-steps .comp-ma2jx6qz1 { --height:76px;--width:76px; } .kudenix-steps .comp-ma2jx6r11 { --height:76px;--width:76px; } .kudenix-steps .comp-ma2jx6ra { --height:76px;--width:76px; } .kudenix-steps .comp-mabgswtz { --height:221px;--width:162px; } /* ────────────────────────────────────────────────────────────────────────── Anclaje a la geometría medida sobre el original. El grid de Wix reparte las filas según el alto del repeater, que aquí no se reproduce igual, así que las piezas se fijan en las coordenadas tomadas del documento renderizado (sección de 1440 de ancho, contenido centrado en 720): cohete x=182 y= 58 270×271 flecha 1 x=425 y=289 76×76 flecha 2 x=947 y=520 76×76 flecha 3 x=425 y=745 76×76 número x=510 ancho 75 y=189 / 394 / 592 / 804 texto x=623 ancho 340 y=203 / 408 / 613 / 818 ────────────────────────────────────────────────────────────────────────── */ .kudenix-steps.kudenix-steps { background: #ffffff; position: relative; min-height: 1002px; } .kudenix-steps.kudenix-steps.kudenix-steps .comp-ma2jx6ptinlineContent, .kudenix-steps.kudenix-steps [data-mesh-id="comp-ma2jx6ptinlineContent"], .kudenix-steps.kudenix-steps [data-mesh-id="comp-ma2jx6ptinlineContent-gridContainer"] { position: static; display: block; height: auto; } /* Cada pieza en su coordenada, medida desde el centro de la sección. */ .kudenix-steps.kudenix-steps .comp-mabgswtz, .kudenix-steps.kudenix-steps .comp-ma2jx6qz1, .kudenix-steps.kudenix-steps .comp-ma2jx6r11, .kudenix-steps.kudenix-steps .comp-ma2jx6ra, .kudenix-steps.kudenix-steps .comp-ma2jx6q0, .kudenix-steps.kudenix-steps .comp-ma2jx6q3 { position: absolute; margin: 0; } .kudenix-steps.kudenix-steps .comp-mabgswtz { /* cohete */ left: calc(50% - 538px); top: 58px; width: 270px; height: 271px; } .kudenix-steps.kudenix-steps .comp-ma2jx6q0 { /* título */ left: calc(50% - 281px); top: 55px; width: 563px; } .kudenix-steps.kudenix-steps .comp-ma2jx6q3 { /* bloque de pasos */ left: calc(50% - 210px); top: 189px; width: 620px; } .kudenix-steps.kudenix-steps .comp-ma2jx6qz1 { /* flecha 1, izquierda */ left: calc(50% - 295px); top: 289px; width: 76px; height: 76px; } .kudenix-steps.kudenix-steps .comp-ma2jx6ra { /* flecha 2, derecha */ left: calc(50% + 227px); top: 520px; width: 76px; height: 76px; } .kudenix-steps.kudenix-steps .comp-ma2jx6r11 { /* flecha 3, izquierda */ left: calc(50% - 295px); top: 745px; width: 76px; height: 76px; } /* Los GIF de flecha traen fondo blanco: sobre la sección blanca no se nota. */ .kudenix-steps.kudenix-steps .comp-ma2jx6qz1 img, .kudenix-steps.kudenix-steps .comp-ma2jx6r11 img, .kudenix-steps.kudenix-steps .comp-ma2jx6ra img, .kudenix-steps.kudenix-steps .comp-mabgswtz img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 1100px) { .kudenix-steps { min-height: 0; padding: 40px 20px 48px; } .kudenix-steps.kudenix-steps .comp-mabgswtz, .kudenix-steps.kudenix-steps .comp-ma2jx6qz1, .kudenix-steps.kudenix-steps .comp-ma2jx6r11, .kudenix-steps.kudenix-steps .comp-ma2jx6ra { display: none; } .kudenix-steps.kudenix-steps .comp-ma2jx6q0, .kudenix-steps.kudenix-steps .comp-ma2jx6q3 { position: static; width: auto; max-width: 620px; margin: 0 auto; } .kudenix-steps.kudenix-steps .comp-ma2jx6q0 { margin-bottom: 32px; } } /* Interior de cada paso. En el original el número va a la izquierda (x=510) y el texto a su derecha (x=623), a la misma altura: 113px de separación, con el título 14px por debajo del número y el cuerpo 50px. */ .kudenix-steps.kudenix-steps .comp-ma2jx6q6 { position: relative; padding: 0 0 34px; min-height: 150px; } .kudenix-steps.kudenix-steps .comp-ma2jx6qc { /* número */ position: absolute; left: 0; top: 0; width: 75px; text-align: center; } .kudenix-steps.kudenix-steps .comp-ma2jx6ql, /* título del paso */ .kudenix-steps.kudenix-steps .comp-ma2jx6qo { /* cuerpo */ margin-left: 113px; width: 340px; } .kudenix-steps.kudenix-steps .comp-ma2jx6ql { padding-top: 14px; } .kudenix-steps.kudenix-steps .comp-ma2jx6qo { padding-top: 4px; } /* Las imágenes se ajustan a su caja sin recortarse. */ .kudenix-steps.kudenix-steps .comp-mabgswtz, .kudenix-steps.kudenix-steps .comp-mabgswtz .apPOZK, .kudenix-steps.kudenix-steps .comp-mabgswtz .gRkIq0 { width: 270px; height: 271px; } .kudenix-steps.kudenix-steps .comp-ma2jx6qz1 .apPOZK, .kudenix-steps.kudenix-steps .comp-ma2jx6qz1 .gRkIq0, .kudenix-steps.kudenix-steps .comp-ma2jx6r11 .apPOZK, .kudenix-steps.kudenix-steps .comp-ma2jx6r11 .gRkIq0, .kudenix-steps.kudenix-steps .comp-ma2jx6ra .apPOZK, .kudenix-steps.kudenix-steps .comp-ma2jx6ra .gRkIq0 { width: 76px; height: 76px; } .kudenix-steps.kudenix-steps .comp-mabgswtz img, .kudenix-steps.kudenix-steps .comp-ma2jx6qz1 img, .kudenix-steps.kudenix-steps .comp-ma2jx6r11 img, .kudenix-steps.kudenix-steps .comp-ma2jx6ra img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 1100px) { .kudenix-steps.kudenix-steps .comp-ma2jx6ql, .kudenix-steps.kudenix-steps .comp-ma2jx6qo { width: auto; } } /* Altura de cada paso, tomada de las posiciones del original: los números caen en y=189, 394, 592 y 804 dentro de la sección, es decir 205, 198 y 212 px de separación entre uno y el siguiente. Fijarlas hace que las flechas, que van en coordenadas absolutas, queden entre pasos. */ .kudenix-steps.kudenix-steps .comp-ma2jx6q6 { padding: 0; min-height: 0; } .kudenix-steps.kudenix-steps .comp-ma2jx6q3 > * > *:nth-child(1) .comp-ma2jx6q6, .kudenix-steps.kudenix-steps .comp-ma2jx6q6:nth-of-type(1) { height: 205px; } .kudenix-steps.kudenix-steps [data-testid="repeater-item"]:nth-child(1) { height: 205px; } .kudenix-steps.kudenix-steps [data-testid="repeater-item"]:nth-child(2) { height: 198px; } .kudenix-steps.kudenix-steps [data-testid="repeater-item"]:nth-child(3) { height: 212px; } .kudenix-steps.kudenix-steps .comp-ma2jx6ql, .kudenix-steps.kudenix-steps .comp-ma2jx6qo { width: 327px; } @media (max-width: 1100px) { .kudenix-steps.kudenix-steps [data-testid="repeater-item"] { height: auto; } .kudenix-steps.kudenix-steps .comp-ma2jx6ql, .kudenix-steps.kudenix-steps .comp-ma2jx6qo { width: auto; } } /* Ajuste final de offsets, medido contra el original: el bloque de pasos arrastraba +76px en x y el cohete −56px en ambos ejes. La sección se fija a los 1002px de alto del documento. */ .kudenix-steps.kudenix-steps { height: 1002px; min-height: 1002px; } .kudenix-steps.kudenix-steps .comp-ma2jx6q3 { left: calc(50% - 286px); } @media (max-width: 1100px) { .kudenix-steps.kudenix-steps { height: auto; min-height: 0; } .kudenix-steps.kudenix-steps .comp-ma2jx6q3 { left: auto; } } /* Variables del documento que la sección consume. Viven en el :root del original, que no forma parte de la sección, así que se redeclaran aquí —sobre la clase raíz, no en :root— con su valor exacto. */ .kudenix-steps.kudenix-steps { --color_41: 77, 186, 232; --font_2: normal normal normal 31px/1.4em 'wf_69da26c8d3244babbb98ee6cf', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Lo mismo para las flechas: caja de 76×76 y la imagen completa dentro. */ .kudenix-steps.kudenix-steps .comp-ma2jx6qz1 > *, .kudenix-steps.kudenix-steps .comp-ma2jx6r11 > *, .kudenix-steps.kudenix-steps .comp-ma2jx6ra > * { width: 76px; height: 76px; overflow: visible; } /* Cohete. En el original mide 162×221 y lleva transform: rotate(44.39deg) —el CSS trasladado ya trae esa regla—, así que su caja aparente es de 270×271. Aquí solo se ancla: centro en (317, 193) según la medición, lo que sitúa el elemento sin rotar en (236, 83). */ .kudenix-steps.kudenix-steps [data-mesh-id="comp-mabgswtz-rotated-wrapper"] { position: absolute; left: calc(50% - 484px); top: 83px; width: 162px; height: 221px; margin: 0; overflow: visible; } .kudenix-steps.kudenix-steps [data-mesh-id="comp-mabgswtz-rotated-wrapper"] .comp-mabgswtz { position: static; width: 162px; height: 221px; } .kudenix-steps.kudenix-steps .comp-mabgswtz .apPOZK, .kudenix-steps.kudenix-steps .comp-mabgswtz .gRkIq0, .kudenix-steps.kudenix-steps .comp-mabgswtz img { width: 162px; height: 221px; object-fit: contain; overflow: visible; } @media (max-width: 1100px) { .kudenix-steps.kudenix-steps [data-mesh-id="comp-mabgswtz-rotated-wrapper"] { display: none; } } /* ────────────────────────────────────────────────────────────────────────── Adaptación a pantallas menores. El diseño original es de ancho fijo (980px) y no contempla móvil, así que por debajo de 1100px el bloque pasa al flujo normal: el cohete y las flechas —decorativos— se retiran, y número y texto se apilan en columna. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .kudenix-steps.kudenix-steps { height: auto; min-height: 0; padding: 40px 20px 48px; box-sizing: border-box; } .kudenix-steps.kudenix-steps .comp-ma2jx6q0, .kudenix-steps.kudenix-steps .comp-ma2jx6q3 { position: static; left: auto; top: auto; width: 100%; max-width: 620px; margin: 0 auto; } .kudenix-steps.kudenix-steps .comp-ma2jx6q0 { margin-bottom: 30px; } /* Cada paso vuelve a altura automática: las de 205/198/212px solo valen para la composición de escritorio. */ .kudenix-steps.kudenix-steps .comp-ma2jx6q6, .kudenix-steps.kudenix-steps [data-testid="repeater-item"] { height: auto; min-height: 0; padding-bottom: 26px; } .kudenix-steps.kudenix-steps .comp-ma2jx6qc { position: static; width: auto; text-align: left; } .kudenix-steps.kudenix-steps .comp-ma2jx6ql, .kudenix-steps.kudenix-steps .comp-ma2jx6qo { margin-left: 0; width: auto; max-width: 100%; } .kudenix-steps.kudenix-steps .comp-ma2jx6ql { padding-top: 4px; } } /* Nada debe forzar scroll horizontal en móvil. */ @media (max-width: 620px) { .kudenix-steps.kudenix-steps { padding: 32px 16px 40px; overflow-x: hidden; } .kudenix-steps.kudenix-steps .comp-ma2jx6q0, .kudenix-steps.kudenix-steps .comp-ma2jx6q3, .kudenix-steps.kudenix-steps .comp-ma2jx6q6, .kudenix-steps.kudenix-steps .comp-ma2jx6qc, .kudenix-steps.kudenix-steps .comp-ma2jx6ql, .kudenix-steps.kudenix-steps .comp-ma2jx6qo { max-width: 100%; box-sizing: border-box; } /* Los tamaños del original son de escritorio; en móvil se reducen. */ .kudenix-steps.kudenix-steps .comp-ma2jx6q0 span { font-size: 26px !important; } .kudenix-steps.kudenix-steps .comp-ma2jx6qc span { font-size: 44px !important; } .kudenix-steps.kudenix-steps .comp-ma2jx6ql span { font-size: 19px !important; } } /* Los contenedores internos del repeater llevan un ancho fijo de 468px, propio del diseño de escritorio. Por debajo de 1100px se vuelven fluidos para que nada sobresalga del viewport. */ @media (max-width: 1100px) { .kudenix-steps.kudenix-steps .comp-ma2jx6q3, .kudenix-steps.kudenix-steps .comp-ma2jx6q3 div, .kudenix-steps.kudenix-steps .comp-ma2jx6q6 { width: auto; max-width: 100%; box-sizing: border-box; } } /* El contenedor de pasos mantiene su ancho de lectura y queda centrado; solo sus hijos se vuelven fluidos. */ @media (max-width: 1100px) { .kudenix-steps.kudenix-steps .comp-ma2jx6q3 { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; } } /* En móvil el número se alinea a la izquierda, sobre su texto y sin el hueco que dejaba la caja de 75px centrada del diseño de escritorio. */ @media (max-width: 1100px) { .kudenix-steps.kudenix-steps .comp-ma2jx6qc, .kudenix-steps.kudenix-steps .comp-ma2jx6qc * { text-align: left; } .kudenix-steps.kudenix-steps .comp-ma2jx6qc { height: auto; min-height: 0; margin-bottom: 2px; line-height: 1; } .kudenix-steps.kudenix-steps .comp-ma2jx6ql { padding-top: 0; margin-top: 0; } } /* El párrafo del número trae text-align:center en un style inline del markup original —pensado para la caja de 75px del escritorio—. En móvil, donde el número encabeza su bloque, se alinea a la izquierda; es el único caso en que hace falta !important, porque un estilo inline no se puede vencer de otro modo sin alterar el markup. */ @media (max-width: 1100px) { .kudenix-steps.kudenix-steps .comp-ma2jx6qc, .kudenix-steps.kudenix-steps .comp-ma2jx6qc p, .kudenix-steps.kudenix-steps .comp-ma2jx6qc span { text-align: left !important; } } /* Línea separadora de cada paso. La regla del documento es border-top: var(--lnw, 2px) solid rgba(var(--brd, …), var(--alpha-brd, 1)) y sus variables se declaran fuera de la sección, así que el borde salía a 0. Valores del original: 3px sobre rgb(212, 212, 212). */ .kudenix-steps.kudenix-steps .comp-ma2jx6qr { --lnw: 3px; --brd: 212, 212, 212; --alpha-brd: 1; margin-left: -12px; /* el original la sitúa en x=498, no en 510 */ }