/* from certificado-odoo.html #bricks-frontend-inline-css */
body .tox.tox-silver-sink.tox-tinymce-aux, body .tox.tox-tinymce-aux, body .tox-shadowhost { z-index: 10001; }
:root { --x-backtotop-stroke-width: 4px;}[data-x-backtotop] { position: fixed; background: none; border: none; box-shadow: none; z-index: 10; box-shadow: 10px 10px 30px 0 rgb(0 0 0 / 12%); transition: all .125s ease-in; text-align: center; opacity: 0; width: 60px; height: 60px; right: 40px; bottom: 40px; transform: translateY(10px);}[data-x-backtotop*=progress] { height: auto!important;}[data-x-backtotop*=progress] { border-radius: 1000px;}body.bricks-is-frontend [data-x-backtotop]:focus { outline: none;}body.bricks-is-frontend [data-x-backtotop]:focus-visible { outline: thin dotted currentcolor;}.x-back-to-top.brx-draggable.is-empty { min-height: 0; min-width: 0;}.x-back-to-top[aria-hidden=true] { pointer-events: none;}.x-back-to-top_progress { vertical-align: middle; overflow: visible; z-index: 1;}svg.x-back-to-top_progress:not(:root) { overflow: visible;}.x-back-to-top_content { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; width: 100%;}[data-x-backtotop*=progress] .x-back-to-top_content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; border-radius: 1000px;}.x-back-to-top_progress-line { fill: transparent; stroke-width: calc( var(--x-backtotop-stroke-width) + 1px); stroke: #111; stroke-linecap: round;}.x-back-to-top_progress-background { stroke: #e5e5e5; fill: transparent; stroke-width: var(--x-backtotop-stroke-width);}svg.x-back-to-top_progress { inline-size: auto;}.x-back-to-top_builder-preview { opacity: 1!important; transform: none!important;}.brx-body.iframe [data-x-backtotop].brx-draggable { transition: all .125s ease-in}.brx-body.iframe .x-back-to-top { transition-property: all!important;}.brx-body.iframe .brx-draggable.is-empty:not(.editing) { outline: none;}
.x-hamburger{font:inherit;display:inline-flex;overflow:visible;margin:0;padding:15px;cursor:pointer;transition-timing-function:linear;transition-duration:.3s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}.x-hamburger.is-active:hover,.x-hamburger:hover{opacity:.7}.x-hamburger.is-active .x-hamburger-inner,.x-hamburger.is-active .x-hamburger-inner:after,.x-hamburger.is-active .x-hamburger-inner:before{background-color:var(--x-burger-line-color)}.x-hamburger-box{position:relative;display:inline-block;width:40px;height:24px}.x-hamburger-inner{top:50%;display:block;margin-top:-2px}.x-hamburger-inner,.x-hamburger-inner:after,.x-hamburger-inner:before{position:absolute;width:40px;height:4px;transition-timing-function:ease;transition-duration:.3s;transition-property:transform;border-radius:var(--x-burger-line-radius);background-color:var(--x-burger-line-color)}.x-hamburger-inner:after,.x-hamburger-inner:before{display:block;content:""}.x-hamburger-inner:before{top:-10px}.x-hamburger-inner:after{bottom:-10px}.x-hamburger--3dx .x-hamburger-box{perspective:80px}.x-hamburger--3dx .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx .x-hamburger-inner:after,.x-hamburger--3dx .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx.is-active .x-hamburger-inner{transform:rotateY(180deg);background-color:transparent!important}.x-hamburger--3dx.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dx.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dx-r .x-hamburger-box{perspective:80px}.x-hamburger--3dx-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx-r .x-hamburger-inner:after,.x-hamburger--3dx-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx-r.is-active .x-hamburger-inner{transform:rotateY(-180deg);background-color:transparent!important}.x-hamburger--3dx-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dx-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dy .x-hamburger-box{perspective:80px}.x-hamburger--3dy .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy .x-hamburger-inner:after,.x-hamburger--3dy .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy.is-active .x-hamburger-inner{transform:rotateX(-180deg);background-color:transparent!important}.x-hamburger--3dy.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dy.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dy-r .x-hamburger-box{perspective:80px}.x-hamburger--3dy-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy-r .x-hamburger-inner:after,.x-hamburger--3dy-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy-r.is-active .x-hamburger-inner{transform:rotateX(180deg);background-color:transparent!important}.x-hamburger--3dy-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dy-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dxy .x-hamburger-box{perspective:80px}.x-hamburger--3dxy .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy .x-hamburger-inner:after,.x-hamburger--3dxy .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy.is-active .x-hamburger-inner{transform:rotateX(180deg) rotateY(180deg);background-color:transparent!important}.x-hamburger--3dxy.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dxy.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dxy-r .x-hamburger-box{perspective:80px}.x-hamburger--3dxy-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy-r .x-hamburger-inner:after,.x-hamburger--3dxy-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy-r.is-active .x-hamburger-inner{transform:rotateX(180deg) rotateY(180deg) rotate(-180deg);background-color:transparent!important}.x-hamburger--3dxy-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dxy-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--arrow.is-active .x-hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrow.is-active .x-hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrow-r.is-active .x-hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrow-r.is-active .x-hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowalt .x-hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt .x-hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,-10px,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowalt.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,10px,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowalt-r .x-hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt-r .x-hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,-10px,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowalt-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,10px,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn.is-active .x-hamburger-inner{transform:rotate(-180deg)}.x-hamburger--arrowturn.is-active .x-hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowturn.is-active .x-hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner{transform:rotate(-180deg)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--boring .x-hamburger-inner,.x-hamburger--boring .x-hamburger-inner:after,.x-hamburger--boring .x-hamburger-inner:before{transition-property:none}.x-hamburger--boring.is-active .x-hamburger-inner{transform:rotate(45deg)}.x-hamburger--boring.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--boring.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(-90deg)}.x-hamburger--collapse .x-hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--collapse .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.x-hamburger--collapse .x-hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--collapse.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--collapse.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.x-hamburger--collapse.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(-90deg)}.x-hamburger--collapse-r .x-hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--collapse-r .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.x-hamburger--collapse-r .x-hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--collapse-r.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(45deg)}.x-hamburger--collapse-r.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.x-hamburger--collapse-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(90deg)}.x-hamburger--elastic .x-hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.x-hamburger--elastic .x-hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.x-hamburger--elastic .x-hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.x-hamburger--elastic.is-active .x-hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(135deg)}.x-hamburger--elastic.is-active .x-hamburger-inner:before{transition-delay:0s;opacity:0}.x-hamburger--elastic.is-active .x-hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(-270deg)}.x-hamburger--elastic-r .x-hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.x-hamburger--elastic-r .x-hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.x-hamburger--elastic-r .x-hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.x-hamburger--elastic-r.is-active .x-hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(-135deg)}.x-hamburger--elastic-r.is-active .x-hamburger-inner:before{transition-delay:0s;opacity:0}.x-hamburger--elastic-r.is-active .x-hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(270deg)}.x-hamburger--emphatic{overflow:hidden}.x-hamburger--emphatic .x-hamburger-inner{transition:background-color .125s ease-in .175s}.x-hamburger--emphatic .x-hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.x-hamburger--emphatic .x-hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.x-hamburger--emphatic.is-active .x-hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.x-hamburger--emphatic.is-active .x-hamburger-inner:before{top:-80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,80px,0) rotate(45deg)}.x-hamburger--emphatic.is-active .x-hamburger-inner:after{top:-80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,80px,0) rotate(-45deg)}.x-hamburger--emphatic-r{overflow:hidden}.x-hamburger--emphatic-r .x-hamburger-inner{transition:background-color .125s ease-in .175s}.x-hamburger--emphatic-r .x-hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.x-hamburger--emphatic-r .x-hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.x-hamburger--emphatic-r.is-active .x-hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.x-hamburger--emphatic-r.is-active .x-hamburger-inner:before{top:80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,-80px,0) rotate(-45deg)}.x-hamburger--emphatic-r.is-active .x-hamburger-inner:after{top:80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,-80px,0) rotate(45deg)}.x-hamburger--minus .x-hamburger-inner:after,.x-hamburger--minus .x-hamburger-inner:before{transition:bottom .08s ease-out 0s,top .08s ease-out 0s,opacity 0s linear}.x-hamburger--minus.is-active .x-hamburger-inner:after,.x-hamburger--minus.is-active .x-hamburger-inner:before{transition:bottom .08s ease-out,top .08s ease-out,opacity 0s linear .08s;opacity:0}.x-hamburger--minus.is-active .x-hamburger-inner:before{top:0}.x-hamburger--minus.is-active .x-hamburger-inner:after{bottom:0}.x-hamburger--slider .x-hamburger-inner{top:2px}.x-hamburger--slider .x-hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.4s;transition-property:transform,opacity}.x-hamburger--slider .x-hamburger-inner:after{top:20px}.x-hamburger--slider.is-active .x-hamburger-inner{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--slider.is-active .x-hamburger-inner:before{transform:rotate(-45deg) translate3d(-5.71429px,-6px,0);opacity:0}.x-hamburger--slider.is-active .x-hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(-90deg)}.x-hamburger--slider-r .x-hamburger-inner{top:2px}.x-hamburger--slider-r .x-hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.4s;transition-property:transform,opacity}.x-hamburger--slider-r .x-hamburger-inner:after{top:20px}.x-hamburger--slider-r.is-active .x-hamburger-inner{transform:translate3d(0,10px,0) rotate(-45deg)}.x-hamburger--slider-r.is-active .x-hamburger-inner:before{transform:rotate(45deg) translate3d(5.71429px,-6px,0);opacity:0}.x-hamburger--slider-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(90deg)}.x-hamburger--spin .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.x-hamburger--spin .x-hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.x-hamburger--spin .x-hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spin.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(225deg)}.x-hamburger--spin.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.x-hamburger--spin.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.x-hamburger--spin-r .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.x-hamburger--spin-r .x-hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.x-hamburger--spin-r .x-hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spin-r.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}.x-hamburger--spin-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.x-hamburger--spin-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg)}.x-hamburger--spring .x-hamburger-inner{top:2px;transition:background-color 0s linear .13s}.x-hamburger--spring .x-hamburger-inner:before{top:10px;transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring .x-hamburger-inner:after{top:20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring.is-active .x-hamburger-inner{transition-delay:.22s;background-color:transparent!important}.x-hamburger--spring.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .4s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--spring.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(-45deg)}.x-hamburger--spring-r .x-hamburger-inner{top:auto;bottom:0;transition-delay:0s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--spring-r .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear}.x-hamburger--spring-r .x-hamburger-inner:before{transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring-r.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--spring-r.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;opacity:0}.x-hamburger--spring-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .4s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:rotate(90deg)}.x-hamburger--stand .x-hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .4s,background-color 0s linear 75ms}.x-hamburger--stand .x-hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand .x-hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand.is-active .x-hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .4s;transform:rotate(90deg);background-color:transparent!important}.x-hamburger--stand.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(-45deg)}.x-hamburger--stand.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(45deg)}.x-hamburger--stand-r .x-hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .4s,background-color 0s linear 75ms}.x-hamburger--stand-r .x-hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand-r .x-hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand-r.is-active .x-hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .4s;transform:rotate(-90deg);background-color:transparent!important}.x-hamburger--stand-r.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(-45deg)}.x-hamburger--stand-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(45deg)}.x-hamburger--squeeze .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms}.x-hamburger--squeeze .x-hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease}.x-hamburger--squeeze .x-hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)}.x-hamburger--squeeze.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.x-hamburger--squeeze.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0}.x-hamburger--squeeze.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.x-hamburger--vortex .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.x-hamburger--vortex .x-hamburger-inner:after,.x-hamburger--vortex .x-hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.x-hamburger--vortex .x-hamburger-inner:before{transition-property:top,opacity}.x-hamburger--vortex .x-hamburger-inner:after{transition-property:bottom,transform}.x-hamburger--vortex.is-active .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(765deg)}.x-hamburger--vortex.is-active .x-hamburger-inner:after,.x-hamburger--vortex.is-active .x-hamburger-inner:before{transition-delay:0s}.x-hamburger--vortex.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--vortex.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(90deg)}.x-hamburger--vortex-r .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.x-hamburger--vortex-r .x-hamburger-inner:after,.x-hamburger--vortex-r .x-hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.x-hamburger--vortex-r .x-hamburger-inner:before{transition-property:top,opacity}.x-hamburger--vortex-r .x-hamburger-inner:after{transition-property:bottom,transform}.x-hamburger--vortex-r.is-active .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(-765deg)}.x-hamburger--vortex-r.is-active .x-hamburger-inner:after,.x-hamburger--vortex-r.is-active .x-hamburger-inner:before{transition-delay:0s}.x-hamburger--vortex-r.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--vortex-r.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(-90deg)}:root { --x-burger-size: 0.8; --x-burger-line-height: 4px; --x-burger-line-color: currentColor;--x-burger-line-radius: 4px;--x-burger-line-color-active: var(--x-burger-line-color);}.brxe-xburgertrigger { background: none;color: inherit;display: inline-flex; cursor: pointer; padding: 10px;line-height: 1;-webkit-tap-highlight-color: transparent;align-items: center;}.brxe-xburgertrigger[class*=brxe-] { width: auto;}.x-hamburger-box {display:flex; background: none;pointer-events: none;transform: scale(var(--x-burger-size));-webkit-transform: scale(var(--x-burger-size));color: var(--x-burger-line-color);}.x-hamburger-box.is-active .x-hamburger-inner {background-color: var(--x-burger-line-color-active);}.brxe-xburgertrigger .x-hamburger-inner:before,.brxe-xburgertrigger .x-hamburger-inner:after {height: inherit;background-color: inherit;}.x-hamburger-inner {height: var(--x-burger-line-height);}
:root { --x-ff-gap: 15px;}.brxe-xfluentform .fluentform input[type=checkbox], .brxe-xfluentform .fluentform input[type=radio] { width: auto}[data-x-fluent-form*=smartUI] .ff-el-group input[type=checkbox]::after,[data-x-fluent-form*=smartUI] .ff-el-group input[type=radio]::after { content: ''; display: block; width: 100%; height: 100%; padding: 0; margin: 0; transition: background-color 0.3s ease;}[data-x-fluent-form*=smartUI] .ff-el-group input[type=checkbox]:checked::after, [data-x-fluent-form*=smartUI] .ff-el-group input[type=radio]:checked::after, [data-x-fluent-form*=smartUI] .ff-el-group .ff_item_selected input[type=checkbox]::after,[data-x-fluent-form*=smartUI] .ff-el-group .ff_item_selected input[type=radio]::after { background-color: #111;}[data-x-fluent-form*=smartUI] .ff-el-group input[type=radio],[data-x-fluent-form*=smartUI] .ff-el-group input[type=checkbox] { appearance: none ; -webkit-appearance: none; -moz-appearance: none; border-style: solid; border-width: 0; outline: 0; display: inline-block; min-width: 1px; width: 15px; height: 15px; background: #ddd; margin-right: 5px; padding: 3px; vertical-align: middle;}:where(.brxe-xfluentform[data-x-fluent-form*=smartUI]) .ff-el-group input[type=radio] { border-radius: 100px;}:where(.brxe-xfluentform[data-x-fluent-form*=smartUI]) .ff-el-group input[type=radio]::after { border-radius: inherit;}.brxe-xfluentform .frm-fluent-form > .ff-el-group:last-child { margin-bottom: 0;}.brxe-xfluentform .fluentform .ff-el-tc { display: block;}.brxe-xfluentform .fluentform .ff_upload_btn.ff-btn { display: inline-block;}.brxe-xfluentform .fluentform .ff-el-progress-bar { display: flex; align-items: center; justify-content: flex-end;}.brxe-xfluentform .ff-el-phone.ff_el_with_extended_validation { padding-left: 55px!important;}.brxe-xfluentform select.ff-el-form-control:not([size]):not([multiple]) { height: auto;}@media (min-width: 768px) { .brxe-xfluentform .frm-fluent-form .ff-t-cell:first-of-type { padding-left: 0!important; } .brxe-xfluentform .frm-fluent-form .ff-t-cell:last-of-type { padding-right: 0!important; }}.brxe-xfluentform .ff-el-repeat-buttons-list svg { height: 1em; width: 1em; font-size: 20px;}@media (min-width: 768px) { .brxe-xfluentform .frm-fluent-form .ff-t-container { display: flex; gap: var(--x-ff-gap); width: 100%; }}
:root { --x-offcanvas-duration: 300ms;}.x-offcanvas_inner { background: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; height: 100vh; max-width: 100%; width: 300px; overflow-x: hidden; top: 0; left: 0; padding: 30px; z-index: 1000; pointer-events: auto; display: none;}.x-offcanvas_ready { -webkit-transition: -webkit-transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); transition: transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),opacity var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); -o-transition: -o-transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); display: -webkit-box; display: -ms-flexbox; display: flex;}.x-offcanvas_backdrop { background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); -o-transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); pointer-events: auto; z-index: 1000; display: none;}.x-offcanvas_ready + .x-offcanvas_backdrop { display: block;}.x-offcanvas_inner { z-index: 1001;}.x-offcanvas_inner[aria-hidden="false"] + .x-offcanvas_backdrop { opacity: 1; visibility: visible;}.x-offcanvas_inner.x-offcanvas_left { left: 0; right: auto; height: 100vh!important;}.x-offcanvas_inner.x-offcanvas_left[aria-hidden="true"] { transform: translateX(-100%); -webkit-transform: translateX(-100%);}.x-offcanvas_inner.x-offcanvas_right { right: 0; left: auto; height: 100vh!important;}.x-offcanvas_inner.x-offcanvas_right[aria-hidden="true"] { transform: translateX(100%); -webkit-transform: translateX(100%);}.x-offcanvas_inner.x-offcanvas_top { top: 0; bottom: auto; right: 0; left: 0; width: 100%!important;}.x-offcanvas_inner.x-offcanvas_top[aria-hidden="true"] { transform: translateY(-100%); -webkit-transform: translateY(-100%);}.x-offcanvas_inner.x-offcanvas_bottom { top: auto; bottom: 0; right: 0; left: 0; width: 100%!important;}.x-offcanvas_inner.x-offcanvas_bottom[aria-hidden="true"] { transform: translateY(100%); -webkit-transform: translateY(100%);}body.admin-bar .x-offcanvas_backdrop { margin-top: var(--wp-admin--admin-bar--height);}body.bricks-is-frontend .x-offcanvas_inner:focus { outline: none;}.admin-bar .x-offcanvas_inner { margin-top: var(--wp-admin--admin-bar--height);}.x-offcanvas_inner > div { max-width: 100%;}html[class*="x-offcanvas_prevent-scroll"],html[class*="x-offcanvas_prevent-scroll"] > body { overflow: hidden;}.x-offcanvas_inner[aria-hidden="true"][data-type="fade"] { opacity: 0; visibility: hidden; transform: none!important; transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1)}.x-offcanvas_inner[aria-hidden="false"][data-type="fade"] { opacity: 1; visibility: visible; transform: none!important;}@media (prefers-reduced-motion: reduce) { .x-offcanvas[data-x-offcanvas*=notransition] .x-offcanvas_backdrop, .x-offcanvas[data-x-offcanvas*=notransition] .x-offcanvas_inner { transition: none; } .x-offcanvas[data-x-offcanvas*=fade] .x-offcanvas_inner[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: none!important; } .x-offcanvas[data-x-offcanvas*=fade].x-offcanvas_inner[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none!important; }}@supports (padding-top: env(safe-area-inset-top)) { .x-offcanvas_inner.x-offcanvas_left { --safe-area-inset-bottom: env(safe-area-inset-bottom); height: calc(100% + var(--safe-area-inset-bottom))!important; } .x-offcanvas_inner.x-offcanvas_right { --safe-area-inset-bottom: env(safe-area-inset-bottom); height: calc(100% + var(--safe-area-inset-bottom))!important; } }.admin-bar .x-offcanvas_inner.x-offcanvas_left { left: 0; right: auto; height: auto!important; bottom: 0;}.admin-bar .x-offcanvas_inner.x-offcanvas_right { right: 0; left: auto; height: auto!important; bottom: 0;}component.x-offcanvas,.x-offcanvas[data-id] { transform: none!important;}component.x-offcanvas.is-empty { min-width: 0; min-height: 0;}component > .x-offcanvas_inner,.x-offcanvas[data-id] .x-offcanvas_inner { display: flex;}component > .x-offcanvas_backdrop,.x-offcanvas[data-id] .x-offcanvas_backdrop { display: block;}.brx-body.iframe .x-offcanvas_inner { transform: none;}.brx-body.iframe div[data-x-offcanvas]:not([data-id]) { display: none;}.brx-body.iframe .x-offcanvas > div:nth-child(3) { display: none;}.brx-body.iframe .x-offcanvas_backdrop { opacity: 1; visibility: visible;}
/*# sourceURL=bricks-frontend-inline-css */
/* from certificado-odoo.html #bricks-frontend-inline-inline-css */
html {scroll-behavior: smooth}:root {--min-viewport: 360;--max-viewport: 1600;--base-font: 10;--clamp-unit: 1vw;} body {color: var(--white)} h1, h2, h3, h4, h5, h6 {color: var(--white)} html {background-color: var(--black)} body {background: none}.gradiant--black__hero.brxe-section {position: relative; justify-content: center}:where(.gradiant--black__hero.brxe-section > *:not(figcaption)) {position: relative}.gradiant--black__hero.brxe-section::before {background-image: linear-gradient(rgba(0, 0, 0, 0), var(--black)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 478px) {.gradiant--black__hero.brxe-section {padding-bottom: 26px}}.fluent--style__oc.brxe-xfluentform .fluentform .ff-btn-submit {background-color: var(--action); border-radius: 100px; color: #ffffff; width: 100%}.fluent--style__oc.brxe-xfluentform .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {background-color: var(--action)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group select {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.32)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.32)}.fluent--style__oc.brxe-xfluentform {width: 100%}.fluent--style__oc.brxe-xfluentform .fluentform .ff_submit_btn_wrapper {text-align: center}.btn.brxe-text-basic {align-self: center}@media (max-width: 478px) {.btn.brxe-text-basic {font-size: calc(var(text--s)*.7)}}.btn.brxe-div {align-self: center !important}@media (max-width: 478px) {.btn.brxe-div {font-size: calc(var(text--s)*.7)}}:root {--bricks-color-acss_import_transparent: transparent;}:root[data-brx-theme="dark"] {--bricks-color-acss_import_transparent: transparent;}#brxe-xauazf .bricks-site-logo {width: 56%}@layer bricks {@media (max-width: 767px) {#brxe-sguayd .bricks-nav-menu-wrapper { display: none; }#brxe-sguayd .bricks-mobile-menu-toggle { display: block; }}}#brxe-sguayd .bricks-nav-menu {gap: 22px}#brxe-sguayd .bricks-nav-menu > li {margin-left: 0}#brxe-sguayd .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-sguayd .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-sguayd {display: none}}@media (max-width: 478px) {#brxe-hunuon {display: none}}#brxe-hcsajr:hover {color: var(--white)}@media (max-width: 767px) {#brxe-hcsajr {display: none}}#brxe-kguvku {display: none}@media (max-width: 991px) {#brxe-kguvku {display: flex}#brxe-kguvku .x-hamburger-box {--x-burger-size: 1; --x-burger-line-height: 1px; --x-burger-line-radius: 1px}}#brxe-quumww {width: 8%; margin-bottom: 30px}#brxe-aaaiqw {font-weight: 500}#brxe-bdpzjf {font-family: "Instrument Serif"}#brxe-xkhgdn {row-gap: 6px}#brxe-eszmjh {background-image: url("/assets/img/uploads/Frame-21-1.png"); background-size: cover; background-position: center center; padding-top: 135px}#brxe-vlaqxf {font-family: "MuseoSans"}#brxe-rbrwqn {font-style: normal; font-weight: 500}#brxe-vxkkof {font-family: "MuseoSans"}#brxe-pitvpe {font-family: "MuseoSans"; font-weight: 500}@media (max-width: 478px) {#brxe-pitvpe {overflow: hidden}}#brxe-nftbfi {font-family: "MuseoSans"}#brxe-pwddnh {font-family: "MuseoSans"}#contactanos {font-family: "MuseoSans"}@media (max-width: 478px) {#brxe-ljeozg {flex-direction: column}}@layer bricks {@media (max-width: 767px) {#brxe-msztos .bricks-nav-menu-wrapper { display: none; }#brxe-msztos .bricks-mobile-menu-toggle { display: block; }}}#brxe-msztos .bricks-nav-menu {gap: 22px}#brxe-msztos .bricks-nav-menu > li {margin-left: 0}#brxe-msztos .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-msztos .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-msztos {display: none}}#brxe-cjfcwd {background-image: url("/assets/img/uploads/Adobe-Express-2026-02-02-21.50.41-1-1-1.png"); background-size: cover; padding-bottom: 90px; position: relative}:where(#brxe-cjfcwd > *:not(figcaption)) {position: relative}#brxe-cjfcwd::before {background-image: linear-gradient(rgba(0, 0, 0, 0.97) 3%, rgba(0, 0, 0, 0) 59%); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 767px) {#brxe-pupeku .bricks-site-logo {height: 39px}}@media (max-width: 767px) {#brxe-wiyvku {font-size: 33px}}@media (max-width: 478px) {#brxe-wiyvku {font-size: 24px}}@media (max-width: 767px) {#brxe-ueagqx {font-size: 33px}}@media (max-width: 478px) {#brxe-ueagqx {font-size: 24px}}@media (max-width: 767px) {#brxe-yqvdeq .brx-dropdown-content {background-color: var(--action)}#brxe-yqvdeq .brx-dropdown-content > li [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li .aria-current {background-color: var(--action-light)}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li > a {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq .brx-dropdown-content .brx-submenu-toggle > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}}@media (max-width: 767px) {#brxe-jtgpdc {font-size: 33px}}@media (max-width: 478px) {#brxe-jtgpdc {font-size: 24px}}@media (max-width: 767px) {#brxe-pmnjue {font-size: 33px}}@media (max-width: 478px) {#brxe-pmnjue {font-size: 24px}}@media (max-width: 767px) {#brxe-inajeq {font-size: 33px}}@media (max-width: 478px) {#brxe-inajeq {font-size: 24px}}@media (max-width: 767px) {#brxe-yfeuba {margin-top: 61px}#brxe-yfeuba.horizontal .line {border-top-color: var(--white-trans-20)}#brxe-yfeuba.vertical .line {border-right-color: var(--white-trans-20)}#brxe-yfeuba .icon {color: var(--white-trans-20)}}@media (max-width: 478px) {#brxe-jhhgdv {height: 100%}}#brxe-kcmpke {--x-offcanvas-duration: 550ms}@media (max-width: 767px) {#brxe-kcmpke .x-offcanvas_inner {width: 500px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgba(22, 2, 48, 0.96)}#brxe-kcmpke {z-index: 999999}}@media (max-width: 478px) {#brxe-kcmpke .x-offcanvas_inner {width: 340px}}#brxe-boievm {right: 40px; bottom: 98px; transform: translateY(10px)}#brxe-boievm .x-back-to-top_progress-line {stroke: var(--white)}#brxe-boievm .x-back-to-top_icon > * {color: var(--white)}
/*# sourceURL=bricks-frontend-inline-inline-css */
/* from certificado-odoo.html wpcb2-0 */
.btn{
color: white;
padding: 10px 18px;
border-radius: 30px;
background-color: transparent;
width: fit-content;
font-size: var(--text-s);
}
.btn-action{
background-color: var(--action);
}
.btn-action:hover{
color: white;
}
.btn-outline{
border: solid 1px rgba(255, 255, 255, 0.176);
}
.btn-outline:hover{
color: white;
}
.btn--oscuro{
background-color: var(--action);
}
/* RESET INTERNO PARA EL COMPONENTE */
.odoo-widget-preview * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.odoo-widget-preview {
background-color: #050506;
color: #94A3B8;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
@media (min-width: 640px) {
.odoo-widget-preview {
padding: 24px;
}
}
@media (min-width: 1024px) {
.odoo-widget-preview {
padding: 48px;
}
}
/* ESTRUCTURA PRINCIPAL DE MAQUETACIÓN (LAYOUT GRID) */
.odoo-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
max-width: 1200px;
align-items: stretch;
}
@media (min-width: 1024px) {
.odoo-layout {
grid-template-columns: 5fr 7fr;
}
}
/* BLOQUE: COLUMNA */
.odoo-layout__column {
display: flex;
flex-direction: column;
gap: 24px;
justify-content: space-between;
height: 100%;
}
/* BLOQUE: TARJETA BASE (CARD) */
.odoo-card {
background-color: #0E0E11;
border: 1px solid rgba(30, 30, 36, 0.8);
border-radius: 24px;
padding: 24px;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
.odoo-card {
padding: 32px;
}
}
.odoo-card:hover {
border-color: #2D2D3D;
}
.odoo-card--flex-expand {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* ELEMENTOS CARD */
.odoo-card__badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 9999px;
background-color: #1A1A22;
border: 1px solid rgba(45, 45, 61, 0.5);
font-size: 10px;
font-weight: 600;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 24px;
user-select: none;
}
.odoo-card__title {
font-size: 28px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 32px;
}
@media (min-width: 768px) {
.odoo-card__title {
font-size: 36px;
}
}
/* BLOQUE: TABLA DE COMPARATIVA */
.comparison-table {
display: flex;
flex-direction: column;
gap: 16px;
font-size: 12px;
}
@media (min-width: 768px) {
.comparison-table {
font-size: 14px;
}
}
/* ELEMENTOS DE LA TABLA */
.comparison-table__row {
display: grid;
grid-template-columns: 1.2fr 0.9fr 0.9fr;
align-items: center;
padding: 12px 4px;
border-bottom: 1px solid rgba(32, 32, 40, 0.6);
transition: background-color 0.15s ease;
border-radius: 8px;
}
.comparison-table__row:hover {
background-color: rgba(21, 21, 26, 0.5);
}
.comparison-table__row--header {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #202028;
color: #64748B;
padding-bottom: 12px;
}
.comparison-table__row--no-border {
border-bottom: none;
padding-bottom: 0;
}
.comparison-table__cell {
color: #94A3B8;
font-weight: 500;
}
.comparison-table__cell--header-teal {
color: #00D8C6;
font-weight: 700;
text-align: center;
letter-spacing: 0.02em;
}
.comparison-table__cell--highlight {
color: #FFFFFF;
font-weight: 600;
text-align: center;
}
.comparison-table__cell--highlight-teal {
color: #00D8C6;
font-weight: 600;
text-align: center;
}
.comparison-table__cell--muted {
color: #64748B;
text-align: right;
font-weight: 400;
}
.comparison-table__cell--right {
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
.comparison-table__cell--center {
display: flex;
align-items: center;
justify-content: center;
}
/* ICONO DE COMPROBACIÓN */
.comparison-table__badge-check {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 6px;
background-color: rgba(16, 185, 129, 0.2);
color: #10B981;
font-size: 10px;
font-weight: 700;
user-select: none;
}
.comparison-table__arrow-icon {
width: 14px;
height: 14px;
color: #64748B;
}
/* BLOQUE: BANNER DE PYME */
.pyme-banner {
background-color: #0E0E11;
border: 1px solid rgba(30, 30, 36, 0.8);
border-radius: 16px;
padding: 24px;
text-align: center;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
user-select: none;
}
.pyme-banner:hover {
border-color: #2D2D3D;
}
.pyme-banner__title {
font-size: 24px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.pyme-banner__subtitle {
font-size: 12px;
color: #94A3B8;
}
/* BLOQUE: ENLACE ENTERPRISE */
.enterprise-link {
text-align: center;
font-size: 12px;
color: #64748B;
text-decoration: none;
padding: 8px 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: color 0.2s ease;
}
.enterprise-link:hover {
color: #FFFFFF;
}
.enterprise-link__highlight {
color: #8B5CF6;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.15s ease;
}
.enterprise-link:hover .enterprise-link__highlight {
color: #A78BFA;
}
.enterprise-link__icon {
width: 12px;
height: 12px;
transition: transform 0.2s ease;
}
.enterprise-link:hover .enterprise-link__icon {
transform: translateX(4px);
}
/* BLOQUE: ESTRUCTURA KPI (TARJETAS DE Métrica) */
.kpi-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 480px) {
.kpi-grid {
grid-template-columns: 1fr 1fr;
}
}
.kpi-grid__card {
background-color: #0E0E11;
border: 1px solid rgba(30, 30, 36, 0.8);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 110px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kpi-grid__card:hover {
border-color: #2D2D3D;
}
.kpi-grid__value {
font-size: 30px;
color: #FFFFFF;
letter-spacing: -0.02em;
}
.kpi-grid__value--light {
font-weight: 300;
}
.kpi-grid__value--bold {
font-weight: 700;
font-size: 36px;
}
.kpi-grid__label {
font-size: 12px;
color: #64748B;
font-weight: 500;
}
/* BLOQUE: FORMULARIO DE CAPTACIÓN (LEAD FORM) */
.lead-form-card {
background-color: #0E0E11;
border: 1px solid rgba(30, 30, 36, 0.8);
border-radius: 24px;
padding: 24px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
@media (min-width: 768px) {
.lead-form-card {
padding: 32px;
}
}
.lead-form-card:hover {
border-color: #2D2D3D;
}
.lead-form-card__icon-box {
width: 48px;
height: 48px;
border-radius: 9999px;
border: 1px solid #202028;
background-color: #141419;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: #94A3B8;
}
.lead-form-card__title {
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: 1.3;
margin-bottom: 8px;
}
@media (min-width: 768px) {
.lead-form-card__title {
font-size: 24px;
}
}
.lead-form-card__desc {
font-size: 12px;
line-height: 1.6;
color: #94A3B8;
margin-bottom: 32px;
}
@media (min-width: 768px) {
.lead-form-card__desc {
font-size: 14px;
}
}
/* CAMPOS DEL FORMULARIO */
.lead-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.lead-form__row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 480px) {
.lead-form__row {
grid-template-columns: 1fr 1fr;
}
}
.lead-form__group {
position: relative;
width: 100%;
}
.lead-form__input,
.lead-form__select,
.lead-form__textarea {
width: 100%;
background-color: #121216;
border: 1px solid #202028;
border-radius: 12px;
padding: 14px 16px;
font-size: 13px;
color: #FFFFFF;
outline: none;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
@media (min-width: 768px) {
.lead-form__input,
.lead-form__select,
.lead-form__textarea {
font-size: 14px;
}
}
.lead-form__input::placeholder,
.lead-form__textarea::placeholder {
color: #475569;
}
.lead-form__input:focus,
.lead-form__select:focus,
.lead-form__textarea:focus {
border-color: #8B5CF6;
box-shadow: 0 0 0 1px #8B5CF6;
}
/* COMPONENTE SELECT PERSONALIZADO */
.lead-form__select-wrapper {
position: relative;
width: 100%;
}
.lead-form__select {
appearance: none;
cursor: pointer;
padding-right: 40px;
}
.lead-form__select-icon {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #64748B;
pointer-events: none;
}
.lead-form__textarea {
resize: none;
min-height: 100px;
}
/* SECCIÓN PREFERENCIAS DE CONTACTO */
.lead-form__pref-section {
padding: 8px 0;
}
.lead-form__pref-label {
font-size: 12px;
color: #64748B;
font-weight: 500;
display: block;
margin-bottom: 12px;
user-select: none;
}
.lead-form__pref-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lead-form__pref-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 12px;
border: 1px solid #202028;
background-color: rgba(18, 18, 22, 0.6);
font-size: 12px;
color: #94A3B8;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
user-select: none;
}
.lead-form__pref-btn:hover {
color: #FFFFFF;
border-color: #475569;
}
.lead-form__pref-btn--active {
border-color: #8B5CF6;
background-color: rgba(139, 92, 246, 0.1);
color: #FFFFFF;
}
.lead-form__pref-icon {
width: 14px;
height: 14px;
}
/* FILA LEGAL / CHECKBOX */
.lead-form__legal-row {
display: flex;
align-items: start;
gap: 12px;
padding-top: 8px;
}
.lead-form__checkbox {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid #202028;
background-color: #121216;
accent-color: #8B5CF6;
cursor: pointer;
margin-top: 2px;
}
.lead-form__legal-label {
font-size: 10px;
line-height: 1.5;
color: #64748B;
cursor: pointer;
user-select: none;
}
@media (min-width: 768px) {
.lead-form__legal-label {
font-size: 11px;
}
}
/* BOTÓN DE ENVÍO */
.lead-form__submit {
width: 100%;
background-color: #8B5CF6;
color: #FFFFFF;
font-weight: 600;
font-size: 12px;
padding: 16px;
border: none;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
letter-spacing: 0.02em;
margin-top: 16px;
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.1);
}
@media (min-width: 768px) {
.lead-form__submit {
font-size: 14px;
}
}
.lead-form__submit:hover {
background-color: #7C3AED;
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.2);
}
.lead-form__submit:active {
transform: scale(0.99);
}
.lead-form__submit-icon {
width: 16px;
height: 16px;
}
/* BLOQUE: NOTIFICACIÓN FLOTANTE (TOAST) */
.toast-notif {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
background-color: #0E0E11;
border: 1px solid rgba(30, 30, 36, 0.8);
border-radius: 16px;
padding: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
max-width: 380px;
width: calc(100% - 48px);
transform: translateY(80px);
opacity: 0;
pointer-events: none;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
display: flex;
gap: 12px;
}
.toast-notif--visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.toast-notif__icon-box {
width: 40px;
height: 40px;
border-radius: 9999px;
background-color: rgba(16, 185, 129, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #10B981;
}
.toast-notif__icon {
width: 20px;
height: 20px;
}
.toast-notif__body {
display: flex;
flex-direction: column;
gap: 4px;
}
.toast-notif__title {
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
}
.toast-notif__text {
font-size: 12px;
color: #94A3B8;
line-height: 1.5;
}
/* from certificado-odoo.html wpcb2-1 */
/* =========================================================================
SOLUCIÓN GLOBAL PARA SECCIÓN CONTACTO (RESPONSIVO MÓVIL)
========================================================================= */
/* 1. Forzamos al Grid principal a no desbordarse jamás */
.oct-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
/* 2. Reglas exclusivas para pantallas móviles y tablets */
@media (max-width: 767px) {
/* Pasamos las filas de Email/Teléfono a diseño vertical */
.oct-info-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
padding: 12px 16px !important;
height: auto !important;
min-height: 0 !important;
}
.brxe-cmdgyc {
transform: scaleX(1) !important;
}
/* Liberamos el ancho fijo de las etiquetas (Email, Teléfono, Ubicación) */
.oct-info-label {
width: auto !important;
color: rgba(255, 255, 255, 0.4) !important;
font-size: 12px !important;
}
/* Rompemos el bloqueo horizontal para que los correos se adapten */
.oct-info-value {
white-space: normal !important;
word-break: break-all !important; /* Si el correo es gigante, se corta elegantemente */
text-align: left !important;
font-size: 14px !important;
width: 100% !important;
}
/* Reducimos los paddings internos de TODAS las tarjetas para ganar espacio */
.oct-card,
#brxe-lmxvlt {
padding: 20px !important;
min-width: 0 !important;
}
/* Reparación del Formulario: Permitimos que los 3 botones de radio salten de línea */
.fluent_form_1 .ff_list_3col .ff-el-input--content {
flex-wrap: wrap !important;
}
.fluent_form_1 .ff_list_3col .ff-el-form-check {
flex: 1 1 calc(50% - 8px) !important; /* Se acomodan en cuadrícula de 2 columnas */
}
}
/* 3. Aseguramos que los inputs nativos de Fluent Forms no empujen la pantalla */
.fluent--style__oc .ff-el-form-control {
width: 100% !important;
box-sizing: border-box !important;
}
.subtittle--service{
color: white;
padding: 5px 10px;
border-radius: 30px;
background-color: transparent;
width: fit-content;
border: solid 1px rgba(255, 255, 255, 0.176);
font-size: var(--text-s);
}
.bg--services__cards{
background: #0B0B0B;
border-radius: 17px;
padding: 27px;
}
.bg--imp{
background: #0B0B0B;
border-radius: 17px;
padding: 15px;
gap: 7px;
}
.regional--inicio__estilo{
padding: 10px;
}
/* Contenedor y espaciadores base */
.w-full { width: 100% !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.relative { position: relative !important; }
.z-10 { z-index: 10 !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
/* Animaciones y transiciones de los ítems con aceleración por hardware */
.faq-item {
background-color: rgba(13, 10, 20, 0.65) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 1rem !important; /* Equivalente a rounded-2xl */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: background-color, border-color, box-shadow;
}
/* Hover del ítem */
.faq-item:hover {
border-color: rgba(168, 85, 247, 0.2) !important;
}
/* Estado Activo (Abierto) */
.faq-item.active {
background-color: rgba(88, 28, 135, 0.2) !important; /* bg-purple-950/20 */
border-color: rgba(168, 85, 247, 0.4) !important; /* border-purple-500/20 */
box-shadow: 0 10px 15px -3px rgba(168, 85, 247, 0.1), 0 4px 6px -2px rgba(168, 85, 247, 0.1) !important;
}
/* Botón de la Pregunta */
.faq-item button {
width: 100% !important;
text-align: left !important;
padding: 1.25rem 1.5rem !important; /* py-5 px-6 */
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem !important;
color: #ffffff !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
outline: none !important;
transition: color 0.2s ease !important;
}
.faq-item button:hover {
color: #c084fc !important; /* text-purple-300 */
}
/* Texto de la pregunta */
.faq-item button span:first-child {
font-weight: 500 !important;
font-size: 0.875rem !important; /* text-sm */
letter-spacing: 0.025em !important; /* tracking-wide */
color: #ffffff !important;
}
@media (min-width: 640px) {
.faq-item button span:first-child {
font-size: 1rem !important; /* sm:text-base */
}
}
/* Icono circular + / - */
.faq-icon {
flex-shrink: 0 !important;
width: 2rem !important; /* w-8 (32px) */
height: 2rem !important; /* h-8 (32px) */
border-radius: 9999px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.125rem !important; /* text-lg */
color: #ffffff !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease !important;
will-change: transform;
}
/* Respuesta ocultable */
.faq-answer {
max-height: 0;
overflow: hidden !important;
padding-left: 1.5rem !important; /* px-6 */
padding-right: 1.5rem !important;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: max-height;
}
/* Párrafo dentro de la respuesta */
.faq-answer p {
padding-bottom: 1.25rem !important; /* pb-5 */
color: #9ca3af !important; /* text-gray-400 */
font-size: 0.75rem !important; /* text-xs */
line-height: 1.625 !important; /* leading-relaxed */
margin: 0 !important;
}
@media (min-width: 640px) {
.faq-answer p {
font-size: 0.875rem !important; /* sm:text-sm */
}
}
/* Estructura y Caja del Componente */
.octopus-contact-section {
width: 100% !important;
margin: 0 auto !important;
padding: 2rem 1rem !important;
box-sizing: border-box !important;
color: #ffffff !important;
}
.octopus-contact-section * {
box-sizing: border-box !important;
}
/* Grid Responsivo de 2 Columnas */
.oct-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
@media (min-width: 1024px) {
.oct-grid {
grid-template-columns: 1.1fr 1.9fr !important;
gap: 2rem !important;
}
}
/* Columna de tarjetas de información de contacto (Izquierda) */
.oct-info-column {
display: flex !important;
flex-direction: column !important;
gap: 1.5rem !important;
}
/* Estilo de Tarjetas Oscuras (Cards) */
.oct-card {
background-color: #0D0D0D !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 1.75rem !important;
padding: 2rem !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
/* Encabezados de Tarjetas */
.oct-card-header {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
margin-bottom: 1.5rem !important;
}
.oct-card-title {
font-size: 1.25rem !important;
font-weight: 600 !important;
color: #ffffff !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
}
/* Filas de Información de Contacto */
.oct-info-list {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
.oct-info-row {
display: flex !important;
align-items: center !important;
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 0.75rem !important;
padding: 0.85rem 1.25rem !important;
font-size: 0.875rem !important;
min-height: 48px !important;
}
.oct-info-label {
color: rgba(255, 255, 255, 0.4) !important;
width: 90px !important;
flex-shrink: 0 !important;
font-weight: 700 !important;
}
.oct-info-value {
color: #ffffff !important;
font-weight: 400 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Estilos del Formulario Inteligente (Derecha) */
.oct-form-header-icon {
width: 2.75rem !important;
height: 2.75rem !important;
border-radius: 9999px !important;
border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 1.5rem !important;
}
.oct-form-title {
font-size: 1.75rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
margin-top: 0 !important;
margin-bottom: 0.75rem !important;
letter-spacing: -0.02em !important;
}
.oct-form-description {
font-size: 0.95rem !important;
color: rgba(255, 255, 255, 0.5) !important;
line-height: 1.5 !important;
margin-top: 0 !important;
margin-bottom: 2rem !important;
}
/* Grid de Campos del Formulario */
.oct-form-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
margin-bottom: 1rem !important;
}
@media (min-width: 640px) {
.oct-form-grid {
grid-template-columns: 1fr 1fr !important;
}
}
/* Inputs y Selects Estilizados */
.oct-input-wrapper {
position: relative !important;
}
.oct-field {
width: 100% !important;
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 0.75rem !important;
padding: 0.85rem 1.15rem !important;
font-size: 0.9rem !important;
color: #ffffff !important;
outline: none !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.oct-field:focus {
border-color: rgba(164, 107, 253, 0.6) !important;
box-shadow: 0 0 0 2px rgba(164, 107, 253, 0.15) !important;
}
.oct-field::placeholder {
color: rgba(255, 255, 255, 0.25) !important;
}
/* Personalización del Select Dropdown */
select.oct-field {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 1.1rem !important;
padding-right: 2.5rem !important;
cursor: pointer !important;
}
/* Opción de fondo para el select en navegadores */
select.oct-field option {
background-color: #0D0D0D !important;
color: #ffffff !important;
}
/* Textarea */
textarea.oct-field {
resize: vertical !important;
min-height: 120px !important;
}
/* Sección Preferencia de Contacto */
.oct-preference-section {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
margin: 1.5rem 0 !important;
}
@media (min-width: 640px) {
.oct-preference-section {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 1.5rem !important;
}
}
.oct-preference-label {
font-size: 0.875rem !important;
color: rgba(255, 255, 255, 0.6) !important;
font-weight: 500 !important;
}
.oct-preference-options {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.75rem !important;
}
/* Botón de Opción de Contacto */
.oct-pref-btn {
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 0.75rem !important;
padding: 0.6rem 1.15rem !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
user-select: none !important;
}
.oct-pref-btn svg {
transition: stroke 0.25s ease !important;
}
.oct-pref-btn:hover {
border-color: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}
/* Estado seleccionado interactivo */
.oct-pref-btn.selected {
background-color: rgba(164, 107, 253, 0.1) !important;
border-color: rgba(164, 107, 253, 0.6) !important;
color: #ffffff !important;
box-shadow: 0 0 10px rgba(164, 107, 253, 0.1) !important;
}
/* Checkbox de Privacidad Personalizado */
.oct-checkbox-wrapper {
display: flex !important;
align-items: flex-start !important;
gap: 0.75rem !important;
margin: 1.5rem 0 !important;
cursor: pointer !important;
user-select: none !important;
}
.oct-checkbox-container {
position: relative !important;
display: inline-block !important;
width: 1.15rem !important;
height: 1.15rem !important;
flex-shrink: 0 !important;
margin-top: 0.15rem !important;
}
.oct-checkbox-container input {
position: absolute !important;
opacity: 0 !important;
cursor: pointer !important;
height: 0 !important;
width: 0 !important;
}
.oct-checkmark {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 0.25rem !important;
transition: all 0.2s ease !important;
}
.oct-checkbox-container input:checked ~ .oct-checkmark {
background-color: #A46BFD !important;
border-color: #A46BFD !important;
}
.oct-checkmark:after {
content: "" !important;
position: absolute !important;
display: none !important;
left: 5px !important;
top: 2px !important;
width: 5px !important;
height: 8px !important;
border: solid white !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
}
.oct-checkbox-container input:checked ~ .oct-checkmark:after {
display: block !important;
}
.oct-checkbox-text {
font-size: 0.75rem !important;
color: rgba(255, 255, 255, 0.45) !important;
line-height: 1.4 !important;
}
/* Botón Enviar Mensaje */
.oct-submit-btn {
width: 100% !important;
background: linear-gradient(135deg, #A46BFD 0%, #8b44fd 100%) !important;
color: #ffffff !important;
border: none !important;
border-radius: 9999px !important;
padding: 1rem 2rem !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 10px 15px -3px rgba(164, 107, 253, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
letter-spacing: 0.015em !important;
}
.oct-submit-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 20px -3px rgba(164, 107, 253, 0.4) !important;
filter: brightness(1.1) !important;
}
.oct-submit-btn:active {
transform: translateY(0) !important;
}
/* Redes Sociales al Final */
.oct-social-footer {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 1.25rem !important;
margin-top: 2rem !important;
}
.oct-social-icon {
color: rgba(255, 255, 255, 0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.2s ease, transform 0.2s ease !important;
text-decoration: none !important;
}
.oct-social-icon:hover {
color: #ffffff !important;
transform: scale(1.1) !important;
}
.filtro-seccion {
background-color: transparent; /* Se adapta al fondo negro de tu web */
color: #ffffff;
max-width: 500px;
}
.botones-filtro {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 25px;
}
.btn-filtro {
background: transparent;
color: #ffffff;
border: 1px solid #444;
padding: 8px 18px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
/* Estado Activo (Morado como en tu diseño) */
.btn-filtro.active {
background-color: #8b5cf6;
border-color: #8b5cf6;
color: white;
}
.bloques-info {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Estilo de las etiquetas (Azul/Verde azulado de la imagen) */
.item-info {
background-color: #146c78;
color: #ffffff;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
}
/* Clase para ocultar elementos con una transición suave */
.item-info.hide {
display: none;
opacity: 0;
}
/* Contenedor Wrapper que reserva el espacio físico en el flujo de la página */
.lg-header-wrapper {
width: 100%;
max-width: 1020px;
margin: 0 auto;
min-height: 68px; /* Altura exacta del menú para evitar saltos al volverse fixed */
padding: 0 var(--space-m, 1.5rem);
box-sizing: border-box;
}
/* El contenedor del header por defecto fluye de manera relativa */
.lg-header-container {
width: 100%;
max-width: 1020px;
box-sizing: border-box;
transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Estado pegajoso arriba: Se activa vía JS cuando se pasa su posición original */
.lg-header-container.lg-scrolled {
position: fixed;
top: 12px; /* Espacio de holgura superior */
left: 50%;
transform: translateX(-50%);
width: calc(100% - var(--space-m, 1.5rem) * 2);
max-width: 1020px;
z-index: 9999;
}
/* LA CÁPSULA INTERNA (EFECTO LIQUID GLASS) */
.lg-capsule {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-s, 12px) var(--space-l, 20px) var(--space-s, 12px) var(--space-xl, 32px);
border-radius: 9999px;
box-sizing: border-box;
width: 100%;
/* Efectos Liquid Glass (Cristal Líquido translúcido) */
background: rgba(10, 10, 12, 0.48);
backdrop-filter: blur(36px) saturate(220%);
-webkit-backdrop-filter: blur(36px) saturate(220%);
border: 1px solid rgba(255, 255, 255, 0.12);
/* Biselado e iluminación interna */
box-shadow:
inset 0 1.5px 0px 0px rgba(255, 255, 255, 0.32),
inset 0 -1.5px 3px 0px rgba(0, 0, 0, 0.6),
0 25px 60px -15px rgba(0, 0, 0, 0.95);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Modificación de la cápsula cuando el contenedor está en estado scrolled */
.lg-header-container.lg-scrolled .lg-capsule {
padding-top: var(--space-xs, 8px);
padding-bottom: var(--space-xs, 8px);
background: rgba(8, 8, 10, 0.65);
box-shadow:
inset 0 1px 0px 0px rgba(255, 255, 255, 0.25),
inset 0 -1px 2px 0px rgba(0, 0, 0, 0.7),
0 15px 40px -10px rgba(0, 0, 0, 0.95);
}
/* Elementos del Logotipo */
.lg-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
user-select: none;
}
.lg-logo-text {
font-weight: 700;
font-size: 16px;
letter-spacing: 0.35em;
color: #ffffff;
}
.lg-logo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Enlaces del Menú (Desktop) */
.lg-nav-menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
gap: var(--space-l, 40px);
}
@media (min-width: 768px) {
.lg-nav-menu {
display: flex;
align-items: center;
}
}
.lg-nav-link {
color: #e4e4e7;
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.25s ease;
}
.lg-nav-link:hover {
color: #ffffff;
}
/* Chevrons */
.lg-chevron {
color: #71717a;
transition: color 0.2s;
}
.lg-nav-link:hover .lg-chevron,
.lg-country-pill:hover .lg-chevron {
color: #ffffff;
}
/* Acciones */
.lg-actions {
display: flex;
align-items: center;
gap: var(--space-s, 16px);
}
.lg-country-selector {
position: relative;
}
.lg-country-pill {
background: rgba(24, 24, 27, 0.75);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 9999px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 10px;
color: #e4e4e7;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.lg-country-pill:hover {
background: rgba(39, 39, 42, 0.9);
border-color: rgba(255, 255, 255, 0.15);
}
/* Desplegable de países */
.lg-dropdown-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 12px);
width: 144px;
border-radius: 16px;
padding: 6px;
z-index: 999;
box-sizing: border-box;
background: rgba(10, 10, 12, 0.85);
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
inset 0 1px 0px 0px rgba(255, 255, 255, 0.2),
0 15px 35px rgba(0, 0, 0, 0.8);
}
.lg-dropdown-menu.show {
display: block;
animation: lgFadeIn 0.2s ease-out;
}
@keyframes lgFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.lg-dropdown-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
color: #e4e4e7;
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-radius: 12px;
transition: background-color 0.2s, color 0.2s;
}
.lg-dropdown-menu a:hover {
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
/* Botón Premium Sólido */
.lg-btn-contact {
background-color: #9d66ff;
color: #ffffff;
border-radius: 9999px;
padding: 10px 24px;
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.25s ease;
box-shadow: 0 4px 15px rgba(157, 102, 255, 0.3);
border: none;
cursor: pointer;
}
.lg-btn-contact:hover {
background-color: #aa7aff;
box-shadow: 0 6px 20px rgba(157, 102, 255, 0.5);
transform: translateY(-1px);
}
.lg-btn-contact:active {
transform: translateY(1px);
}
/* Contenedor principal de la placa (Cápsula oscura de cristal) */
.confianza-badge {
position: relative;
display: inline-flex;
align-items: center;
/* Fondo oscuro ultra traslúcido extraído de la captura */
background: rgba(22, 10, 45, 0.65);
/* Borde fino sutil con un tono violeta muy suave */
border: 1px solid rgba(168, 85, 247, 0.18);
border-radius: 9999px;
padding: 8px 20px 8px 12px;
user-select: none;
outline: none;
overflow: hidden; /* Necesario para el efecto de brillo interior */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-sizing: border-box;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* --- GRUPO DE AVATARES --- */
.avatar-group {
display: flex;
align-items: center;
margin-right: 12px;
}
/* Elemento Avatar individual */
.avatar-item {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
/* Borde oscuro para separación perfecta entre caras */
border: 1.5px solid #14052b;
/* Efecto de superposición */
margin-right: -38px;
transition: transform 0.3s ease, margin-right 0.3s ease;
display: block;
}
/* Evitar margen negativo en el último avatar */
.avatar-item:last-child {
margin-right: 0;
}
/* --- TEXTO DEL COMPONENTE --- */
.confianza-texto {
color: rgba(255, 255, 255, 0.9);
font-size: 14.5px;
font-weight: 400;
letter-spacing: -0.1px;
line-height: 1;
white-space: nowrap;
transition: color 0.3s ease;
}
/* Agrega esta clase a tu elemento HTML */
.tarjeta-premium {
background-color: #121212;
border-radius: 26px;
padding: 34px 30px 30px 30px;
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
inset 0 1px 1px rgba(255, 255, 255, 0.18);
max-width: 460px;
width: 100%;
}
/* Estilos complementarios para los textos */
.tarjeta-titulo {
color: #ffffff;
font-size: var(--h4);
font-weight: 500;
letter-spacing: -0.5px;
line-height: 1.25;
}
.tarjeta-descripcion {
color: #85858a;
font-size: var(--text-s);
line-height: 1.45;
margin: 0;
}
/* Estilos de la sección principal y fondo con degradado premium */
.bricks-imp-section {
background-color: #030303;
background-image: radial-gradient(circle at 50% 20%, #111112 0%, #030303 70%);
padding: 80px 24px;
width: 100%;
display: flex;
justify-content: center;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bricks-imp-section * {
box-sizing: border-box;
}
/* Contenedor adaptativo */
.bricks-imp-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: start;
}
/* Distribución en Escritorio (Lg) */
@media (min-width: 1024px) {
.bricks-imp-container {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 64px;
}
.bricks-imp-col-left {
grid-column: span 5 / span 5;
background-color: #0d0d0e !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 28px !important;
padding: 28px !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
inset 0 1px 1px rgba(255, 255, 255, 0.04) !important;
}
.bricks-imp-col-right {
grid-column: span 7 / span 7;
}
}
/* --- COLUMNA DE PASOS (IZQUIERDA) --- */
.bricks-imp-header {
margin-bottom: 40px;
}
.bricks-imp-badge {
display: inline-block;
padding: 6px 14px;
font-size: 11px;
font-weight: 500;
color: #a1a1aa;
border: 1px solid rgba(255, 255, 255, 0.08);
background-color: rgba(24, 24, 27, 0.4);
border-radius: 9999px;
letter-spacing: 0.5px;
margin-bottom: 16px;
text-transform: uppercase;
}
.bricks-imp-title {
font-size: 38px;
font-weight: 700;
color: #ffffff;
letter-spacing: -1px;
line-height: 1.15;
margin: 0;
}
@media (min-width: 768px) {
.bricks-imp-title {
font-size: 46px;
}
}
.bricks-imp-steps-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.bricks-imp-step {
display: flex;
gap: 20px;
align-items: start;
}
.bricks-imp-step__number {
width: 42px;
height: 42px;
background-color: #0d0d0e;
border: 1px solid rgba(255, 255, 255, 0.06);
color: #e4e4e7;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: border-color 0.2s ease;
}
.bricks-imp-step:hover .bricks-imp-step__number {
border-color: rgba(255, 255, 255, 0.15);
}
.bricks-imp-step__title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin: 0 0 4px 0;
letter-spacing: -0.2px;
}
.bricks-imp-step__desc {
font-size: 14px;
color: #a1a1aa;
margin: 0;
line-height: 1.55;
}
/* Flecha divisora */
.bricks-imp-arrow {
width: 16px;
height: 16px;
color: #3f3f46;
margin-left: 13px;
}
/* --- COLUMNA DE TARJETAS Y FORMULARIO (DERECHA) --- */
.bricks-imp-metrics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.bricks-imp-card-metric {
background-color: #0d0d0e;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 24px;
text-align: center;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6),
inset 0 1px 1px rgba(255, 255, 255, 0.03);
}
.bricks-imp-card-metric__num {
font-size: 32px;
font-weight: 700;
color: #ffffff;
display: block;
letter-spacing: -0.5px;
}
@media (min-width: 768px) {
.bricks-imp-card-metric__num {
font-size: 38px;
}
}
.bricks-imp-card-metric__label {
font-size: 11px;
color: #a1a1aa;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
display: block;
}
/* Tarjeta contenedora del formulario */
.bricks-imp-form-card {
background-color: #0d0d0e;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 28px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
inset 0 1px 1px rgba(255, 255, 255, 0.04);
}
@media (min-width: 768px) {
.bricks-imp-form-card {
padding: 40px;
}
}
.bricks-imp-form-card__icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: #a1a1aa;
margin-bottom: 24px;
}
.bricks-imp-form-card__title {
font-size: 22px;
font-weight: 600;
color: #ffffff;
margin: 0 0 10px 0;
line-height: 1.3;
letter-spacing: -0.5px;
}
@media (min-width: 768px) {
.bricks-imp-form-card__title {
font-size: 26px;
}
}
.bricks-imp-form-card__desc {
font-size: 14px;
color: #a1a1aa;
margin: 0 0 32px 0;
line-height: 1.55;
}
.bricks-imp-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.bricks-imp-form__row {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 640px) {
.bricks-imp-form__row {
grid-template-columns: 1fr 1fr;
}
}
.bricks-imp-field {
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.05);
color: #ffffff;
border-radius: 12px;
padding: 13px 16px;
font-size: 14.5px;
width: 100%;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bricks-imp-field::placeholder {
color: #4b4b4f;
}
.bricks-imp-field:focus {
outline: none;
border-color: rgba(139, 92, 246, 0.6);
background-color: #151517;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
/* Icono de flecha para el selector */
.bricks-imp-select-wrapper {
position: relative;
width: 100%;
}
.bricks-imp-select-wrapper select {
appearance: none;
padding-right: 40px;
}
.bricks-imp-select-wrapper::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 6px;
background-color: #52525b;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
pointer-events: none;
}
.bricks-imp-textarea {
resize: none;
min-height: 90px;
}
/* Píldoras de Preferencia de Contacto */
.bricks-imp-pills-label {
font-size: 12.5px;
color: #a1a1aa;
font-weight: 500;
margin-bottom: 10px;
display: block;
}
.bricks-imp-pills-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.bricks-imp-pill {
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 9px 18px;
border-radius: 9999px;
font-size: 13px;
color: #a1a1aa;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.bricks-imp-pill:hover {
border-color: rgba(255, 255, 255, 0.12);
color: #e4e4e7;
}
.bricks-imp-pill.is-active {
background-color: #1d1d20;
border-color: rgba(255, 255, 255, 0.18);
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Checkbox de Privacidad */
.bricks-imp-checkbox-row {
display: flex;
align-items: start;
gap: 10px;
padding-top: 4px;
}
.bricks-imp-checkbox {
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: #8b5cf6;
cursor: pointer;
}
.bricks-imp-checkbox-label {
font-size: 11px;
color: #52525b;
line-height: 1.4;
cursor: pointer;
user-select: none;
}
/* Botón de Enviar */
.bricks-imp-submit {
background-color: #8b5cf6;
color: #ffffff;
font-weight: 500;
font-size: 14.5px;
border-radius: 9999px;
padding: 14px 28px;
border: none;
cursor: pointer;
width: 100%;
text-align: center;
transition: all 0.2s ease;
display: block;
}
.bricks-imp-submit:hover {
background-color: #7c3aed;
box-shadow: 0 0 24px rgba(139, 92, 246, 0.4);
transform: translateY(-1px);
}
.bricks-imp-submit:active {
transform: translateY(0);
}
/* Redes sociales en pie de tarjeta */
.bricks-imp-socials {
display: flex;
justify-content: center;
gap: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
margin-top: 8px;
}
.bricks-imp-social-link {
font-size: 12px;
color: #52525b;
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease;
}
.bricks-imp-social-link:hover {
color: #a1a1aa;
}
/* --- VENTANA MODAL EMERGENTE (SUCESO DE ENVÍO) --- */
.bricks-imp-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.bricks-imp-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.bricks-imp-modal-card {
background-color: #0e0e0f;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 32px;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
}
.bricks-imp-modal-check {
width: 56px;
height: 56px;
background-color: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.3);
color: #a78bfa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px auto;
font-size: 24px;
}
.bricks-imp-modal-title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin: 0 0 8px 0;
}
.bricks-imp-modal-text {
font-size: 13px;
color: #a1a1aa;
line-height: 1.5;
margin: 0 0 24px 0;
}
.bricks-imp-modal-btn {
width: 100%;
padding: 11px;
background-color: #1e1e1f;
border: 1px solid rgba(255, 255, 255, 0.05);
color: #ffffff;
font-weight: 500;
font-size: 13px;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.bricks-imp-modal-btn:hover {
background-color: #27272a;
}
bg--comohacemos{
background-color: #0d0d0e !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 28px !important;
padding: 28px !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
inset 0 1px 1px rgba(255, 255, 255, 0.04) !important;
}
/* Estilos de la sección principal y fondo con degradado premium */
.bricks-contact-section {
background-color: #030303;
background-image: radial-gradient(circle at 50% 50%, #111112 0%, #030303 100%);
padding: 80px 24px;
width: 100%;
display: flex;
justify-content: center;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bricks-contact-section * {
box-sizing: border-box;
}
/* Contenedor adaptativo en rejilla */
.bricks-contact-container {
max-width: 1100px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
/* Distribución en Escritorio (Lg) a 2 columnas */
@media (min-width: 992px) {
.bricks-contact-container {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
/* --- TARJETA PREMIUM ESTILO OSCURO --- */
.bricks-contact-card {
background-color: #0d0d0e;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 36px;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7),
inset 0 1px 1px rgba(255, 255, 255, 0.03);
display: flex;
flex-direction: column;
gap: 28px;
}
/* Cabecera de la tarjeta con alineación minimalista */
.bricks-contact-header {
display: flex;
align-items: center;
gap: 12px;
}
.bricks-contact-icon {
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bricks-contact-title {
font-size: 24px;
font-weight: 500;
color: #ffffff;
margin: 0;
letter-spacing: -0.5px;
}
/* Contenedor de filas de información */
.bricks-contact-rows {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Fila individual estilo píldora/caja */
.bricks-contact-row {
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 14px;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.bricks-contact-row:hover {
border-color: rgba(255, 255, 255, 0.08);
background-color: #151517;
}
.bricks-contact-row__label {
font-size: 14.5px;
font-weight: 400;
color: #85858a;
flex-shrink: 0;
}
.bricks-contact-row__value {
font-size: 14.5px;
font-weight: 400;
color: #ffffff;
text-align: right;
text-decoration: none;
word-break: break-all;
transition: color 0.2s ease;
}
/* Efecto hover suave para enlaces interactivos */
.bricks-contact-row__value[href]:hover {
color: #a78bfa; /* Sutil tono violeta de acento */
}
/* Adaptabilidad para móviles pequeños */
@media (max-width: 480px) {
.bricks-contact-card {
padding: 24px;
}
.bricks-contact-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 14px 16px;
}
.bricks-contact-row__value {
text-align: left;
}
}
/* RESETEADOR INTERNO DEL COMPONENTE */
.pricing-section * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CONTENEDOR PRINCIPAL */
.pricing-section {
background-color: #050506;
color: #94A3B8;
padding: 40px 16px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
/* REJILLA RESPONSIVA DE TARJETAS (GRID) */
.pricing-section__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
max-width: 1240px;
}
@media (min-width: 640px) {
.pricing-section__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.pricing-section__grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* BLOQUE: TARJETA DE PRECIOS */
.pricing-card {
background-color: #0E0E11;
border: 1.5px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
padding: 32px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.pricing-card:hover {
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
}
/* MODIFICADOR: TARJETA DESTACO / RECOMENDADO ("Plan estándar") */
.pricing-card--featured {
border-color: #8B5CF6;
box-shadow: 0 0 24px rgba(139, 92, 246, 0.15);
}
.pricing-card--featured:hover {
border-color: #A78BFA;
box-shadow: 0 0 32px rgba(139, 92, 246, 0.25);
}
/* ELEMENTO: INSIGNIA "MEJOR OPCIÓN" */
.pricing-card__badge {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background-color: #8B5CF6;
color: #FFFFFF;
font-size: 11px;
font-weight: 600;
padding: 6px 16px;
border-radius: 9999px;
text-transform: none;
white-space: nowrap;
letter-spacing: 0.02em;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
/* ELEMENTO: CABECERA Y DETALLES DEL PLAN */
.pricing-card__header {
margin-bottom: 24px;
}
.pricing-card__title {
font-size: 22px;
font-weight: 500;
color: #FFFFFF;
margin-bottom: 16px;
}
/* CONTENEDOR DE PRECIOS */
.pricing-card__price-box {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 4px;
}
.pricing-card__currency {
font-size: 28px;
font-weight: 600;
color: #FFFFFF;
align-self: flex-start;
margin-top: 4px;
}
.pricing-card__price {
font-size: 52px;
font-weight: 700;
color: #FFFFFF;
line-height: 1;
}
.pricing-card__period {
font-size: 12px;
color: #94A3B8;
font-weight: 400;
margin-left: 4px;
}
/* TEXTO DE FACTURACIÓN ANUAL */
.pricing-card__billing-info {
font-size: 11px;
color: #64748B;
margin-bottom: 8px;
font-weight: 400;
}
/* SUB-ETIQUETA (E.G. HASTA 2 USUARIOS) */
.pricing-card__sub-label {
font-size: 13px;
color: #94A3B8;
margin-bottom: 8px;
font-weight: 400;
}
/* ELEMENTO: BOTÓN DE ACCIÓN */
.pricing-card__button {
display: block;
width: 100%;
background-color: #8B5CF6;
color: #FFFFFF;
text-align: center;
padding: 14px;
border-radius: 9999px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
margin: 16px 0 24px 0;
transition: background-color 0.2s ease, transform 0.1s ease;
border: none;
cursor: pointer;
}
.pricing-card__button:hover {
background-color: #7C3AED;
}
.pricing-card__button:active {
transform: scale(0.98);
}
/* ELEMENTO: DESCRIPCIÓN DEL PLAN */
.pricing-card__description {
font-size: 13px;
line-height: 1.5;
color: #94A3B8;
margin-bottom: 24px;
min-height: 40px;
}
/* SECCIÓN DE CARACTERÍSTICAS INCLUIDAS */
.pricing-card__features {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 20px;
}
.pricing-card__features-title {
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
margin-bottom: 12px;
}
.pricing-card__features-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.pricing-card__feature-item {
font-size: 12px;
color: #94A3B8;
line-height: 1.4;
display: flex;
align-items: flex-start;
}
/* RESETEADOR INTERNO DEL COMPONENTE (Heredando tipografías de tu proyecto) */
.sales-booster * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CONTENEDOR PRINCIPAL DEL COMPONENTE */
.sales-booster {
background-color: #050506;
color: #FFFFFF;
padding: 60px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
}
/* ELEMENTO: TÍTULO PRINCIPAL */
.sales-booster__title {
font-size: 32px;
font-weight: 700;
text-align: center;
margin-bottom: 48px;
color: #FFFFFF;
letter-spacing: -0.02em;
}
@media (min-width: 768px) {
.sales-booster__title {
font-size: 48px;
}
}
/* MODIFICADOR/ELEMENTO EN ÉNFASIS DEL TÍTULO */
.sales-booster__title-accent {
font-style: italic;
font-weight: 400;
color: #E2E8F0;
margin-left: 8px;
}
/* BLOQUE: INTERFAZ DEL CHAT (VENTANA PRINCIPAL) */
.sales-booster__chat-window {
background-color: #0E0E11;
border: 1.5px solid rgba(0, 150, 255, 0.35);
border-radius: 28px;
width: 100%;
max-width: 820px;
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 150, 255, 0.08);
}
/* ELEMENTO: CABECERA DEL CHAT */
.sales-booster__chat-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* ELEMENTO: AVATAR DE LA IA */
.sales-booster__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #26C6DA;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sales-booster__avatar-icon {
width: 24px;
height: 24px;
color: #0E0E11;
}
/* ELEMENTO: DETALLES DE CONEXIÓN */
.sales-booster__meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.sales-booster__agent-name {
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
}
.sales-booster__agent-status {
font-size: 12px;
color: #00D8C6;
font-weight: 500;
}
/* ELEMENTO: CUERPO DEL CHAT (ZONA DE MENSAJES) */
.sales-booster__chat-body {
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px 24px;
}
/* BLOQUE: MENSAJE INDIVIDUAL */
.chat-message {
display: flex;
width: 100%;
}
/* MODIFICADOR: MENSAJE DEL USUARIO (DERECHA) */
.chat-message--user {
justify-content: flex-end;
}
/* MODIFICADOR: MENSAJE DE LA IA (IZQUIERDA) */
.chat-message--ai {
justify-content: flex-start;
}
/* MODIFICADOR: ACCIÓN DE PAGO (CENTRO) */
.chat-message--action {
justify-content: center;
margin-top: 8px;
}
/* ELEMENTO: BURBUJA DE TEXTO GENERAL */
.chat-message__bubble {
max-width: 85%;
padding: 16px 20px;
border-radius: 20px;
font-size: 14px;
line-height: 1.5;
color: #FFFFFF;
/* Soporte para el efecto Liquid Glass (difumina el fondo) */
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: transform 0.2s ease;
}
@media (min-width: 768px) {
.chat-message__bubble {
max-width: 70%;
font-size: 15px;
}
}
/* BURBUJAS - ESTILO LIQUID GLASS ESPECÍFICO */
/* Burbuja del Usuario (Morado Brillante) */
.chat-message__bubble--user {
background-color: rgba(45, 27, 78, 0.45);
border: 1.5px solid rgba(139, 92, 246, 0.4);
border-bottom-right-radius: 4px;
/* Brillo de reflexión interna para emular cristal grueso */
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15),
0 8px 32px rgba(139, 92, 246, 0.05);
}
/* Burbuja de la IA (Cian/Azul Verdoso) */
.chat-message__bubble--ai {
background-color: rgba(14, 68, 82, 0.45);
border: 1.5px solid rgba(38, 198, 218, 0.45);
border-bottom-left-radius: 4px;
/* Brillo de reflexión interna para emular cristal grueso */
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15),
0 8px 32px rgba(38, 198, 218, 0.05);
}
/* Burbuja de Acción de Pago (Verde Esmeralda Líquido) */
.chat-message__bubble--action {
background-color: rgba(27, 122, 43, 0.5);
border: 1.5px solid rgba(34, 197, 94, 0.45);
border-radius: 16px;
text-align: center;
font-weight: 600;
padding: 18px 32px;
max-width: 100%;
/* Brillo de reflexión interna más pronunciado */
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25),
0 12px 36px rgba(34, 197, 94, 0.15);
}
/* ELEMENTOS INTERNOS DE TEXTO */
.chat-message__text {
white-space: pre-line;
}
.chat-message__text--bold {
font-weight: 700;
display: block;
margin-top: 4px;
font-size: 16px;
}
/* RESETEADOR INTERNO DEL COMPONENTE */
.mercat-features * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CONTENEDOR PRINCIPAL DEL COMPONENTE */
.mercat-features {
background-color: #050506;
color: #FFFFFF;
padding: 40px 16px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/* REJILLA RESPONSIVA DE TARJETAS (GRID BEM) */
.mercat-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
max-width: 1140px;
}
@media (min-width: 768px) {
.mercat-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.mercat-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* BLOQUE: TARJETA INDIVIDUAL (CARD) */
.mercat-card {
background-color: #0E0E11;
border: 1.5px solid rgba(255, 255, 255, 0.04);
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.mercat-card:hover {
border-color: rgba(139, 92, 246, 0.25);
transform: translateY(-4px);
}
/* ELEMENTO: CONTENEDOR DE MEDIOS / ILUSTRACIÓN */
.mercat-card__media {
width: 100%;
height: 200px;
border-radius: 16px;
overflow: hidden;
background-color: #070709;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.03);
}
/* ELEMENTO: IMAGEN REAL ESTÁTICA */
.mercat-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.mercat-card:hover .mercat-card__image {
transform: scale(1.02);
}
/* ELEMENTO: DETALLES DE TEXTO */
.mercat-card__content {
display: flex;
flex-direction: column;
gap: 8px;
}
.mercat-card__title {
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.01em;
line-height: 1.3;
}
.mercat-card__desc {
font-size: 13px;
line-height: 1.6;
color: #94A3B8;
}
/* RESETEADOR INTERNO DEL COMPONENTE */
.octopus-section * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CONTENEDOR DE LA SECCIÓN PRINCIPAL (Simulación de fondo oscuro para el Preview) */
.octopus-section {
background-color: #050506;
color: #FFFFFF;
padding: 48px 16px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
/* DISEÑO DE REJILLA RESPONSIVA (GRID BEM) */
.octopus-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
max-width: 1140px;
align-items: stretch;
}
@media (min-width: 1024px) {
.octopus-grid {
grid-template-columns: 5fr 7fr;
}
}
/* ==================================================== */
/* BLOQUE: TARJETA DE CUALIFICACIÓN (QUALIFIER CARD) */
/* ==================================================== */
.qualifier-card {
background-color: #0E0E11;
border: 1.5px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 32px 24px;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
transition: border-color 0.3s ease;
}
@media (min-width: 768px) {
.qualifier-card {
padding: 40px;
}
}
.qualifier-card:hover {
border-color: rgba(255, 255, 255, 0.08);
}
/* ELEMENTO: INSIGNIA / BADGE */
.qualifier-card__badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 9999px;
background-color: #1A1A22;
border: 1px solid rgba(255, 255, 255, 0.06);
font-size: 10px;
font-weight: 600;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 24px;
align-self: flex-start;
user-select: none;
}
/* ELEMENTO: TÍTULO */
.qualifier-card__title {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 36px;
}
@media (min-width: 768px) {
.qualifier-card__title {
font-size: 40px;
}
}
/* ELEMENTO: LISTA DE BENEFICIOS */
.qualifier-card__list {
list-style: none;
display: flex;
flex-direction: column;
}
/* ELEMENTO: ÍTEM DE LA LISTA */
.qualifier-card__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1.5px solid rgba(255, 255, 255, 0.04);
gap: 16px;
}
.qualifier-card__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.qualifier-card__item-text {
font-size: 14px;
line-height: 1.5;
color: #E2E8F0;
font-weight: 500;
}
@media (min-width: 768px) {
.qualifier-card__item-text {
font-size: 15px;
}
}
/* ELEMENTO: CONTENEDOR CHECKBOX VERDE */
.qualifier-card__check {
width: 18px;
height: 18px;
border-radius: 4px;
background-color: #10B981;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.qualifier-card__check-icon {
width: 11px;
height: 11px;
color: #FFFFFF;
}
/* ==================================================== */
/* BLOQUE: FORMULARIO DE CAPTACIÓN (LEAD FORM CARD) */
/* ==================================================== */
.lead-form-card {
background-color: #0E0E11;
border: 1.5px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 32px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
transition: border-color 0.3s ease;
}
@media (min-width: 768px) {
.lead-form-card {
padding: 40px;
}
}
.lead-form-card:hover {
border-color: rgba(255, 255, 255, 0.08);
}
/* ELEMENTO: ICONO DE CABECERA */
.lead-form-card__icon-box {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
background-color: #141419;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: #FFFFFF;
}
.lead-form-card__icon {
width: 20px;
height: 20px;
}
/* ELEMENTO: TEXTOS DE CABECERA */
.lead-form-card__title {
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 8px;
}
@media (min-width: 768px) {
.lead-form-card__title {
font-size: 24px;
}
}
.lead-form-card__desc {
font-size: 13.5px;
line-height: 1.6;
color: #94A3B8;
margin-bottom: 32px;
}
/* ELEMENTO: FORMULARIO EN SÍ */
.lead-form {
display: flex;
flex-direction: column;
gap: 16px;
}
/* ELEMENTO: FILA DE ENTRADA (ROW) */
.lead-form__row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.lead-form__row {
grid-template-columns: 1fr 1fr;
}
}
.lead-form__group {
position: relative;
width: 100%;
}
/* ELEMENTO: INPUTS / CONTROLES */
.lead-form__input,
.lead-form__select,
.lead-form__textarea {
width: 100%;
background-color: #121216;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 14px 16px;
font-size: 13.5px;
color: #FFFFFF;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.lead-form__input::placeholder,
.lead-form__textarea::placeholder {
color: #475569;
}
.lead-form__input:focus,
.lead-form__select:focus,
.lead-form__textarea:focus {
border-color: #8B5CF6;
box-shadow: 0 0 0 1px #8B5CF6;
}
/* COMPONENTE SELECT PERSONALIZADO */
.lead-form__select-wrapper {
position: relative;
width: 100%;
}
.lead-form__select {
appearance: none;
cursor: pointer;
padding-right: 40px;
}
.lead-form__select-icon {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #64748B;
pointer-events: none;
}
.lead-form__textarea {
resize: none;
min-height: 100px;
}
/* ELEMENTO: PREFERENCIA DE CONTACTO */
.lead-form__pref-section {
padding: 8px 0;
}
.lead-form__pref-label {
font-size: 12px;
color: #64748B;
font-weight: 500;
display: block;
margin-bottom: 12px;
user-select: none;
}
.lead-form__pref-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lead-form__pref-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
background-color: rgba(18, 18, 22, 0.6);
font-size: 12px;
color: #94A3B8;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
user-select: none;
}
.lead-form__pref-btn:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.2);
}
.lead-form__pref-btn--active {
border-color: #8B5CF6;
background-color: rgba(139, 92, 246, 0.1);
color: #FFFFFF;
}
.lead-form__pref-icon {
width: 14px;
height: 14px;
}
/* ELEMENTO: CHECKBOX LEGAL */
.lead-form__legal-row {
display: flex;
align-items: start;
gap: 12px;
padding-top: 8px;
}
.lead-form__checkbox {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: #121216;
accent-color: #8B5CF6;
cursor: pointer;
margin-top: 2px;
}
.lead-form__legal-label {
font-size: 10px;
line-height: 1.5;
color: #64748B;
cursor: pointer;
user-select: none;
}
@media (min-width: 768px) {
.lead-form__legal-label {
font-size: 11px;
}
}
/* ELEMENTO: BOTÓN DE ENVÍO */
.lead-form__submit {
width: 100%;
background-color: #8B5CF6;
color: #FFFFFF;
font-weight: 600;
font-size: 13px;
padding: 16px;
border: none;
border-radius: 9999px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
letter-spacing: 0.02em;
margin-top: 16px;
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.1);
}
@media (min-width: 768px) {
.lead-form__submit {
font-size: 14px;
}
}
.lead-form__submit:hover {
background-color: #7C3AED;
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.2);
}
.lead-form__submit:active {
transform: scale(0.99);
}
/* ELEMENTO: REDES SOCIALES INTERNAS */
.lead-form__socials {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 24px;
padding-top: 20px;
border-top: 1.5px solid rgba(255, 255, 255, 0.04);
}
.lead-form__social-link {
color: #64748B;
transition: color 0.2s ease;
display: inline-flex;
}
.lead-form__social-link:hover {
color: #FFFFFF;
}
.lead-form__social-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
/* ==================================================== */
/* BLOQUE: NOTIFICACIÓN FLOTANTE (TOAST) */
/* ==================================================== */
.toast-notif {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
background-color: #0E0E11;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
max-width: 380px;
width: calc(100% - 48px);
transform: translateY(80px);
opacity: 0;
pointer-events: none;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
display: flex;
gap: 12px;
}
.toast-notif--visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.toast-notif__icon-box {
width: 40px;
height: 40px;
border-radius: 9999px;
background-color: rgba(16, 185, 129, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #10B981;
}
.toast-notif__icon {
width: 20px;
height: 20px;
}
.toast-notif__body {
display: flex;
flex-direction: column;
gap: 4px;
}
.toast-notif__title {
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
}
.toast-notif__text {
font-size: 12px;
color: #94A3B8;
line-height: 1.5;
}
/* RESETEADOR INTERNO DEL COMPONENTE */
.octopus-landing-preview * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* FONDO OSCURO DEL PREVIEW (Simulación del Canvas) */
.octopus-landing-preview {
background-color: #050506;
background-image: radial-gradient(circle at 50% 20%, #16122d 0%, #050506 70%);
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 40px;
position: relative;
}
/* ==================================================== */
/* BLOQUE: CABECERA FLOTANTE AISLADA (OCT-GLASS-HEADER) */
/* ==================================================== */
.oct-glass-header {
position: absolute;
top: 40px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
padding: 0 24px;
box-sizing: border-box;
z-index: 1000;
}
/* ELEMENTO: CONTENEDOR DE LA CÁPSULA (OCT-GLASS-HEADER CAPSULE) */
.oct-glass-header__container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px 10px 32px;
border-radius: 9999px;
background-color: rgba(10, 10, 12, 0.48);
backdrop-filter: blur(36px) saturate(220%);
-webkit-backdrop-filter: blur(36px) saturate(220%);
border: 1px solid rgba(255, 255, 255, 0.12);
width: 100%;
max-width: 1020px;
box-sizing: border-box;
/* Biselado tridimensional e iluminación interna de cristal */
box-shadow:
inset 0 1.5px 0px 0px rgba(255, 255, 255, 0.32),
inset 0 -1.5px 3px 0px rgba(0, 0, 0, 0.6),
0 25px 60px -15px rgba(0, 0, 0, 0.95);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ELEMENTO: LOGOTIPO */
.oct-glass-header__logo {
display: flex;
align-items: center;
gap: 4px;
text-decoration: none;
user-select: none;
}
.oct-glass-header__logo-text {
font-weight: 700;
font-size: 17px;
letter-spacing: 0.35em;
color: #FFFFFF;
}
.oct-glass-header__logo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: -1px;
}
/* ELEMENTO: MENÚ DE ENLACES (NAV) */
.oct-glass-header__nav {
display: none; /* Ocultar en dispositivos móviles */
}
@media (min-width: 768px) {
.oct-glass-header__nav {
display: flex;
align-items: center;
}
}
.oct-glass-header__menu {
display: flex;
align-items: center;
list-style: none;
gap: 40px;
}
.oct-glass-header__link {
color: #E4E4E7;
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
transition: color 0.25s ease;
}
.oct-glass-header__link:hover {
color: #FFFFFF;
}
/* ELEMENTO: ACCIONES (PAÍS + BOTÓN CONTACTAR) */
.oct-glass-header__actions {
display: flex;
align-items: center;
gap: 16px;
}
/* ELEMENTO: SELECTOR DE PAÍS (COUNTRY PILL) */
.oct-glass-header__country {
background-color: rgba(24, 24, 27, 0.75);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 9999px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 10px;
color: #E4E4E7;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
.oct-glass-header__country:hover {
background-color: rgba(39, 39, 42, 0.9);
border-color: rgba(255, 255, 255, 0.15);
color: #FFFFFF;
}
.oct-glass-header__flag {
font-size: 14px;
}
.oct-glass-header__code {
letter-spacing: 0.02em;
}
.oct-glass-header__chevron {
color: #71717A;
transition: color 0.2s;
}
.oct-glass-header__country:hover .oct-glass-header__chevron {
color: #FFFFFF;
}
/* ELEMENTO: BOTÓN DE CONTACTO PREMIUM (SÓLIDO) */
.oct-glass-header__btn {
background-color: #A46BFD;
color: #FFFFFF;
border-radius: 9999px;
padding: 10px 24px;
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.25s ease;
box-shadow: 0 4px 15px rgba(164, 107, 253, 0.3);
border: none;
cursor: pointer;
}
.oct-glass-header__btn:hover {
background-color: #B584FF;
box-shadow: 0 6px 20px rgba(164, 107, 253, 0.5);
transform: translateY(-1px);
}
.oct-glass-header__btn:active {
transform: translateY(1px);
}
/* Contenedor principal de la sección */
.oct-hist-wrapper {
width: 100%;
position: relative;
z-index: 10;
padding: 60px 0;
box-sizing: border-box;
}
/* Rejilla de 3 columnas (Desktop) */
.oct-hist-grid {
display: grid;
grid-template-columns: 3fr 6fr 3fr; /* Proporciones de Figma: laterales delgadas, centro ancho */
gap: 40px;
align-items: center;
max-width: 1240px;
margin: 0 auto;
width: 100%;
}
/* Columnas laterales de imágenes */
.oct-hist-side-col {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
gap: 80px; /* Separación vertical entre tarjetas */
}
/* Estilo de las Tarjetas de Imágenes con efecto Tilt (Figma) */
.oct-hist-card {
background: #0E0E11; /* Fondo oscuro idéntico a tu captura */
padding: 6px; /* Simula el bisel o borde blanco de Figma */
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil reflectante */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); /* Sombra tridimensional */
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
width: 100%;
box-sizing: border-box;
}
/* Efecto interactivo sutil en hover */
.oct-hist-card:hover {
transform: rotate(0deg) scale(1.05) !important; /* Quita la rotación y agranda sutilmente */
border-color: rgba(255, 255, 255, 0.2);
}
.oct-hist-card img {
width: 100%;
height: 150px; /* Altura simétrica para las imágenes */
object-fit: cover; /* Evita distorsiones de la imagen */
border-radius: 11px;
display: block;
opacity: 0.9;
}
/* Rotaciones e inclinaciones exactas de tu captura de pantalla */
.oct-hist-tilt-left-top {
transform: rotate(-8deg);
align-self: flex-start;
width: 95%;
}
.oct-hist-tilt-left-bottom {
transform: rotate(-5deg);
align-self: flex-end;
width: 90%;
}
.oct-hist-tilt-right-top {
transform: rotate(6deg);
align-self: flex-end;
width: 85%;
}
.oct-hist-tilt-right-middle {
transform: rotate(8deg);
width: 95%;
}
.oct-hist-tilt-right-bottom {
transform: rotate(-4deg);
align-self: flex-end;
width: 80%;
}
/* Columna Central de Contenido de Texto */
.oct-hist-center-col {
display: flex;
flex-direction: column;
gap: 32px; /* Separación generosa entre párrafos de Figma */
text-align: left;
}
.oct-hist-center-col p {
color: #d4d4d8; /* Gris suave para descanso de lectura */
font-size: 15.5px;
line-height: 1.7; /* Altura de línea recomendada */
font-weight: 400;
margin: 0;
}
/* Destacados en Negrita de la captura */
.oct-hist-center-col strong {
color: #ffffff; /* Contraste blanco fuerte */
font-weight: 700;
}
/* Mosaico responsivo exclusivo para teléfonos móviles */
.oct-hist-mobile-mosaic {
display: none;
}
/* =========================================================================
3. RESPONSIVE DESIGN (Pantallas de Celulares y Tablets)
========================================================================= */
@media (max-width: 1024px) {
/* Convierte la grilla de 3 columnas a 1 sola columna vertical */
.oct-hist-grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 16px;
}
/* Oculta las columnas laterales de imágenes inclinadas para evitar overflow */
.oct-hist-side-col {
display: none;
}
/* Activa el mosaico ordenado al final del texto en móviles */
.oct-hist-mobile-mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 24px;
}
.oct-hist-mobile-card {
background: #0E0E11;
padding: 4px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-sizing: border-box;
}
.oct-hist-mobile-card img {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* Rotaciones muy sutiles para móvil sin salirse de la pantalla */
.oct-hist-mobile-tilt-1 {
transform: rotate(-3deg);
}
.oct-hist-mobile-tilt-2 {
transform: rotate(3deg);
}
}
/* Contenedor envolvente de la sección para evitar colisiones */
.oct-ident-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 60px 24px;
box-sizing: border-box;
}
/* Tarjeta contenedora oscura principal */
.oct-ident-card {
background-color: #0E0E11; /* Fondo ultra oscuro del Figma */
border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil reflectante */
border-radius: 32px; /* Esquinas redondeadas premium */
padding: 80px 40px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
text-align: center;
position: relative;
overflow: hidden;
}
/* Halo de luz sutil en el fondo de la tarjeta */
.oct-ident-card::before {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(164, 107, 253, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
}
/* Badge superior / Píldora "Nuestra identidad" */
.oct-ident-badge {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 6px 16px;
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
color: #a1a1aa; /* Gris zinc */
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 24px;
display: inline-block;
user-select: none;
z-index: 2;
}
/* Título principal con tipografía mixta de Figma */
.oct-ident-headline {
color: #ffffff;
font-size: 38px;
line-height: 1.25;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 0 64px 0;
max-width: 900px;
z-index: 2;
}
@media (min-width: 768px) {
.oct-ident-headline {
font-size: 48px;
}
}
/* Tipografía cursiva elegante de Figma */
.oct-ident-headline-serif {
font-style: italic;
font-weight: 400;
color: #ffffff;
}
/* Rejilla de 3 columnas para los pilares */
.oct-ident-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
width: 100%;
z-index: 2;
}
@media (min-width: 1024px) {
.oct-ident-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
/* Columnas de pilares individuales */
.oct-ident-col {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 12px;
box-sizing: border-box;
}
/* Contenedor de iconos */
.oct-ident-icon-wrapper {
color: #ffffff;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.oct-ident-col:hover .oct-ident-icon-wrapper {
transform: translateY(-4px); /* Sutil feedback dinámico */
}
/* Estilo de los SVGs de los iconos */
.oct-ident-icon-svg {
width: 56px;
height: 56px;
stroke-width: 1.5;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Títulos de pilares */
.oct-ident-col-title {
color: #ffffff;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 16px 0;
}
/* Textos de descripción */
.oct-ident-col-desc {
color: #85858a; /* Gris neutro del Figma */
font-size: 13.5px;
line-height: 1.6;
margin: 0;
font-weight: 400;
max-width: 320px;
}
.filtro-seccion {
background-color: transparent; /* Se adapta al fondo negro de tu web */
color: #ffffff;
max-width: 500px;
}
.botones-filtro {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 25px;
}
.btn-filtro {
background: transparent;
color: #ffffff;
border: 1px solid #444;
padding: 8px 18px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
/* Estado Activo (Morado como en tu diseño) */
.btn-filtro.active {
background-color: #8b5cf6;
border-color: #8b5cf6;
color: white;
}
.bloques-info {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Estilo de las etiquetas (Azul/Verde azulado de la imagen) */
.item-info {
background-color: #146c78;
color: #ffffff;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
}
/* Clase para ocultar elementos con una transición suave */
.item-info.hide {
display: none;
opacity: 0;
}
/* =========================================================================
ESTILOS DEL TÍTULO MIXTO (Encapsulado para Bricks Builder)
========================================================================= */
.oct-title-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
/* Título principal con la fuente condensed del Figma */
.oct-title-heading {
color: #ffffff;
/* Aplica tu tipografía principal. Si no se ha cargado en el sistema, cae a sans-serif condensado */
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
/* Escalado de fuente fluido y responsivo */
font-size: clamp(38px, 6vw, 68px);
}
/* Span para la palabra con tipografía Serif Italic elegante */
.oct-title-heading .serif-italic {
/* Familia exacta extraída de tu captura de pantalla de WordPress */
font-style: italic;
font-weight: 400;
letter-spacing: 0.02em;
/* Pequeño ajuste visual para balancear el peso con la tipografía condensed */
display: inline-block;
transform: translateY(1px);
}
/* Contenedor principal: flexible, responsivo y centrado */
.paises-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
align-items: center;
padding: 24px;
background: transparent; /* Totalmente transparente */
width: 100%;
box-sizing: border-box;
}
/* Estilos de la cápsula individual */
.pais-capsula {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.12); /* Fondo blanco traslúcido original */
border: 1px solid rgba(180, 140, 255, 0.25); /* Borde fino violeta brillante */
border-radius: 9999px; /* Forma de cápsula perfecta */
padding: 12px 28px;
cursor: pointer;
outline: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
backdrop-filter: blur(4px); /* Efecto de cristal translúcido esmerilado */
-webkit-backdrop-filter: blur(4px);
box-sizing: border-box;
}
/* Bandera (Emoji) */
.pais-bandera {
font-size: 20px;
margin-right: 12px;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
/* Texto del país */
.pais-nombre {
color: rgba(255, 255, 255, 0.9); /* Color blanco brillante original */
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.2px;
}
/* --- EFECTOS INTERACTIVOS (HOVER & FOCUS) --- */
/* Efecto al pasar el cursor */
.pais-capsula:hover {
background: rgba(255, 255, 255, 0.2); /* Se vuelve más sólido */
border-color: rgba(180, 140, 255, 0.55); /* El borde se ilumina */
box-shadow: 0 0 16px rgba(180, 140, 255, 0.3); /* Resplandor suave neón */
transform: translateY(-2px); /* Micro-interacción premium de elevación */
}
/* Al hacer clic (active) */
.pais-capsula:active {
transform: translateY(0) scale(0.97); /* Pequeña respuesta física al presionar */
background: rgba(255, 255, 255, 0.25);
}
/* Accesibilidad con teclado */
.pais-capsula:focus-visible {
border-color: #ffffff;
box-shadow: 0 0 0 3px rgba(180, 140, 255, 0.5);
}
/* 1. Forzar diseño en columna: Título arriba, botones abajo */
.fluent_form_1 .ff_list_3col {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
float: none !important;
}
/* 2. Resetear el espacio del título y mandarlo arriba */
.fluent_form_1 .ff_list_3col .ff-el-input--label {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin-bottom: 10px !important;
padding: 0 !important;
}
/* 3. Contenedor de botones al 100% del ancho de la tarjeta */
.fluent_form_1 .ff_list_3col .ff-el-input--content {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
}
/* 4. Distribución milimétrica de las 3 cajas por igual */
.fluent_form_1 .ff_list_3col .ff-el-form-check {
flex: 1 !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* 5. Ajuste estético y tipográfico de los botones */
.fluent_form_1 .ff_list_3col .ff-el-form-check-label {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #121216 !important;
color: #94A3B8 !important;
border: 1px solid #202028 !important;
padding: 12px 4px !important; /* Padding interno reducido para asegurar espacio del texto */
border-radius: 12px !important;
cursor: pointer !important;
width: 100% !important;
margin: 0 !important;
font-size: 13px !important; /* Texto sutilmente más pequeño para prevenir desbordes internos */
text-align: center !important;
}
/* 6. Input invisible pero funcional encima de toda la caja */
.fluent_form_1 .ff_list_3col .ff-el-form-check-input {
position: absolute !important;
top: 0 !important;
left: 0 !important;
opacity: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
z-index: 2 !important;
cursor: pointer !important;
}
/* 7. Hover y Estado Seleccionado Corporativo (Morado Octopus) */
.fluent_form_1 .ff_list_3col .ff-el-form-check-label:hover {
border-color: #475569 !important;
color: #ffffff !important;
}
.fluent_form_1 .ff_list_3col .ff-el-form-check-label:has(.ff-el-form-check-input:checked) {
background-color: rgba(164, 107, 253, 0.1) !important;
border-color: #A46BFD !important;
color: #ffffff !important;
box-shadow: 0 0 12px rgba(164, 107, 253, 0.2) !important;
}
/* Centrar el último elemento de la cuadrícula en pantallas de escritorio y tablets */
@media (min-width: 768px) {
#brxe-yymocb > .bg--services__cards:last-of-type {
grid-column: span 2;
justify-self: center;
width: 100%;
max-width: 540px; /* Esto evita que se estire y mantiene el mismo ancho que las demás */
}
}
/* Contenedor principal con fondo negro */
.carousel-container {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
background-color: #000000 !important;
padding: 2.5rem 0 !important;
overflow: hidden !important;
display: block !important;
box-sizing: border-box !important;
}
/* Riel que limita la vista y añade las sombras de desvanecimiento */
.carousel-track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
width: max-content !important;
}
/* Sombreado elegante difuminado en extremos izquierdo y derecho */
.mask-gradient {
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
}
/* Bloque de logos individuales alineados */
.carousel-block {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
flex-shrink: 0 !important;
gap: 5.5rem !important;
padding-right: 5.5rem !important; /* Mismo valor que el gap para mantener simetría decimal */
width: max-content !important;
position: relative !important;
float: none !important;
/* Animación fluida acelerada por hardware de GPU */
animation: scroll-left 25s linear infinite !important;
}
/* Logos individuales con inmunidad absoluta contra colapso de WordPress */
.carousel-logo {
height: 45px !important;
width: auto !important;
max-width: none !important; /* Bloquea el "max-width: 100%" de Bricks/WordPress */
flex-shrink: 0 !important; /* Impide que las imágenes se aplasten horizontalmente */
object-fit: contain !important;
user-select: none !important;
transition: all 0.3s ease !important;
margin: 0 !important;
padding: 0 !important;
filter: brightness(0) invert(1) !important;
}
/* Pausa en hover */
.carousel-container.hover-pause:hover .carousel-block {
animation-play-state: paused !important;
}
/* Hover de logo individual */
.carousel-logo:hover {
transform: scale(1.08) !important;
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Keyframes de traslación del -50% */
@keyframes scroll-left {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes scroll-right {
0% { transform: translate3d(-50%, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}
/* =========================================================================
CONTENEDOR DE AUTORIDAD (COLUMNA IZQUIERDA FIGMA CLONE)
========================================================================= */
.odoo-authority {
max-width: 560px;
display: flex;
flex-direction: column;
gap: 32px; /* Separación armónica entre bloques */
box-sizing: border-box;
}
/* 1. INSIGNIA / BADGE SILVER PARTNER */
.odoo-authority__badge {
display: inline-flex;
align-items: center;
gap: 14px;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 10px 18px;
align-self: flex-start; /* Impide que se estire al 100% */
user-select: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.odoo-authority__badge-icon {
font-size: 20px;
line-height: 1;
}
.odoo-authority__badge-content {
display: flex;
flex-direction: column;
gap: 1px;
}
.odoo-authority__badge-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #FFFFFF;
}
.odoo-authority__badge-subtitle {
color: #71717A; /* Gris zinc suave de tu captura */
font-size: 11px;
font-weight: 400;
}
/* 2. TITULARES (HEADING MIXTO) */
.odoo-authority__heading {
font-size: clamp(34px, 5vw, 48px); /* Fluid typography responsiva */
font-weight: 600;
line-height: 1.15;
color: #FFFFFF;
letter-spacing: -0.02em;
margin: 0;
}
.odoo-authority__heading-italic {
display: block; /* Empuja a la línea inferior exacta */
font-style: italic;
font-weight: 400;
color: #94A3B8; /* Color gris plata premium atenuado */
margin-top: 8px;
letter-spacing: -0.01em;
}
/* 3. PÁRRAFO INFORMATIVO */
.odoo-authority__description {
font-size: 15px;
line-height: 1.6;
color: #94A3B8; /* Mismo tono de descanso visual */
font-weight: 400;
margin: 0;
}
/* 4. SEPARADOR HORIZONTAL SUTIL */
.odoo-authority__divider {
border: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
margin: 4px 0 !important;
width: 100%;
}
/* 5. LISTADO DE ICONOS DE CONFIANZA */
.odoo-authority__list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 18px; /* Separación uniforme entre ventajas */
}
.odoo-authority__item {
display: flex;
align-items: center;
gap: 14px;
margin: 0 !important;
padding: 0 !important;
}
/* El círculo verde esmeralda con borde nativo */
.odoo-authority__check {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid #10B981; /* Verde esmeralda CRO */
color: #10B981;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* Evita que el círculo se deforme si el texto es muy largo */
box-sizing: border-box;
}
/* Ajuste del vector interno del check */
.odoo-authority__check svg {
width: 11px;
height: 11px;
display: block;
}
/* Texto de la ventaja */
.odoo-authority__text {
font-size: 14.5px;
font-weight: 400;
color: #E2E8F0; /* Blanco suave roto para alta lectura */
line-height: 1.4;
}
/* =========================================================================
6. CALENDARIO FLOTANTE (ESTILO OSCURO CORPORATIVO PARA EL DATEPICKER)
========================================================================= */
body .flatpickr-calendar {
background: #FFFFFF !important;
border-radius: 16px !important;
border: 1px solid #E2E8F0 !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3) !important;
padding: 8px !important;
}
body .flatpickr-months .flatpickr-month,
body .flatpickr-current-month .flatpickr-monthDropdown-months {
color: #0F172A !important;
font-weight: 700 !important;
}
body .flatpickr-calendar .flatpickr-weekday {
color: #94A3B8 !important;
font-weight: 600 !important;
}
body .flatpickr-day {
color: #334155 !important;
border-radius: 50% !important;
}
body .flatpickr-day:hover {
background-color: #F1F5F9 !important;
color: #0F172A !important;
}
body .flatpickr-day.today {
border-color: #8B5CF6 !important;
color: #8B5CF6 !important;
font-weight: 700 !important;
}
body .flatpickr-day.selected,
body .flatpickr-day.selected:hover {
background: #0F172A !important; /* Anillo sólido oscuro para selección clara */
border-color: #0F172A !important;
color: #FFFFFF !important;
font-weight: 700 !important;
}
/* from contactanos.html #bricks-frontend-inline-inline-css */
html {scroll-behavior: smooth}:root {--min-viewport: 360;--max-viewport: 1600;--base-font: 10;--clamp-unit: 1vw;} body {color: var(--white)} h1, h2, h3, h4, h5, h6 {color: var(--white)} html {background-color: var(--black)} body {background: none}.fluent--style__oc.brxe-xfluentform .fluentform .ff-btn-submit {background-color: var(--action); border-radius: 100px; color: #ffffff; width: 100%}.fluent--style__oc.brxe-xfluentform .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {background-color: var(--action)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group select {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.32)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.32)}.fluent--style__oc.brxe-xfluentform {width: 100%}.fluent--style__oc.brxe-xfluentform .fluentform .ff_submit_btn_wrapper {text-align: center}.btn.brxe-text-basic {align-self: center}@media (max-width: 478px) {.btn.brxe-text-basic {font-size: calc(var(text--s)*.7)}}.btn.brxe-div {align-self: center !important}@media (max-width: 478px) {.btn.brxe-div {font-size: calc(var(text--s)*.7)}}:root {--bricks-color-acss_import_transparent: transparent;}:root[data-brx-theme="dark"] {--bricks-color-acss_import_transparent: transparent;}#brxe-xauazf .bricks-site-logo {width: 56%}@layer bricks {@media (max-width: 767px) {#brxe-sguayd .bricks-nav-menu-wrapper { display: none; }#brxe-sguayd .bricks-mobile-menu-toggle { display: block; }}}#brxe-sguayd .bricks-nav-menu {gap: 22px}#brxe-sguayd .bricks-nav-menu > li {margin-left: 0}#brxe-sguayd .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-sguayd .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-sguayd {display: none}}@media (max-width: 478px) {#brxe-hunuon {display: none}}#brxe-hcsajr:hover {color: var(--white)}@media (max-width: 767px) {#brxe-hcsajr {display: none}}#brxe-kguvku {display: none}@media (max-width: 991px) {#brxe-kguvku {display: flex}#brxe-kguvku .x-hamburger-box {--x-burger-size: 1; --x-burger-line-height: 1px; --x-burger-line-radius: 1px}}#brxe-uftybq {font-family: "MuseoSans"}#brxe-gnxuin {font-style: normal; font-weight: 500}#brxe-zzmnwb {font-family: "MuseoSans"}#brxe-ffibqy {font-family: "MuseoSans"; font-weight: 500}@media (max-width: 478px) {#brxe-ffibqy {overflow: hidden}}#brxe-rhytgt {font-family: "MuseoSans"}#brxe-fxrsnx {font-family: "MuseoSans"}#contactanos {font-family: "MuseoSans"; padding-top: 8%}@media (max-width: 478px) {#brxe-ljeozg {flex-direction: column}}@layer bricks {@media (max-width: 767px) {#brxe-msztos .bricks-nav-menu-wrapper { display: none; }#brxe-msztos .bricks-mobile-menu-toggle { display: block; }}}#brxe-msztos .bricks-nav-menu {gap: 22px}#brxe-msztos .bricks-nav-menu > li {margin-left: 0}#brxe-msztos .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-msztos .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-msztos {display: none}}#brxe-cjfcwd {background-image: url("/assets/img/uploads/Adobe-Express-2026-02-02-21.50.41-1-1-1.png"); background-size: cover; padding-bottom: 90px; position: relative}:where(#brxe-cjfcwd > *:not(figcaption)) {position: relative}#brxe-cjfcwd::before {background-image: linear-gradient(rgba(0, 0, 0, 0.97) 3%, rgba(0, 0, 0, 0) 59%); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 767px) {#brxe-pupeku .bricks-site-logo {height: 39px}}@media (max-width: 767px) {#brxe-wiyvku {font-size: 33px}}@media (max-width: 478px) {#brxe-wiyvku {font-size: 24px}}@media (max-width: 767px) {#brxe-ueagqx {font-size: 33px}}@media (max-width: 478px) {#brxe-ueagqx {font-size: 24px}}@media (max-width: 767px) {#brxe-yqvdeq .brx-dropdown-content {background-color: var(--action)}#brxe-yqvdeq .brx-dropdown-content > li [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li .aria-current {background-color: var(--action-light)}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li > a {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq .brx-dropdown-content .brx-submenu-toggle > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}}@media (max-width: 767px) {#brxe-jtgpdc {font-size: 33px}}@media (max-width: 478px) {#brxe-jtgpdc {font-size: 24px}}@media (max-width: 767px) {#brxe-pmnjue {font-size: 33px}}@media (max-width: 478px) {#brxe-pmnjue {font-size: 24px}}@media (max-width: 767px) {#brxe-inajeq {font-size: 33px}}@media (max-width: 478px) {#brxe-inajeq {font-size: 24px}}@media (max-width: 767px) {#brxe-yfeuba {margin-top: 61px}#brxe-yfeuba.horizontal .line {border-top-color: var(--white-trans-20)}#brxe-yfeuba.vertical .line {border-right-color: var(--white-trans-20)}#brxe-yfeuba .icon {color: var(--white-trans-20)}}@media (max-width: 478px) {#brxe-jhhgdv {height: 100%}}#brxe-kcmpke {--x-offcanvas-duration: 550ms}@media (max-width: 767px) {#brxe-kcmpke .x-offcanvas_inner {width: 500px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgba(22, 2, 48, 0.96)}#brxe-kcmpke {z-index: 999999}}@media (max-width: 478px) {#brxe-kcmpke .x-offcanvas_inner {width: 340px}}#brxe-boievm {right: 40px; bottom: 98px; transform: translateY(10px)}#brxe-boievm .x-back-to-top_progress-line {stroke: var(--white)}#brxe-boievm .x-back-to-top_icon > * {color: var(--white)}
/*# sourceURL=bricks-frontend-inline-inline-css */
/* from home.html #bricks-frontend-inline-inline-css */
html {scroll-behavior: smooth}:root {--min-viewport: 360;--max-viewport: 1600;--base-font: 10;--clamp-unit: 1vw;} body {color: var(--white)} h1, h2, h3, h4, h5, h6 {color: var(--white)} html {background-color: var(--black)} body {background: none}.gradiant--black__hero.brxe-section {position: relative; justify-content: center}:where(.gradiant--black__hero.brxe-section > *:not(figcaption)) {position: relative}.gradiant--black__hero.brxe-section::before {background-image: linear-gradient(rgba(0, 0, 0, 0), var(--black)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 478px) {.gradiant--black__hero.brxe-section {padding-bottom: 26px}}.absolute.brxe-div {position: absolute}.absolute.brxe-image {position: absolute}.btn.brxe-text-basic {align-self: center}@media (max-width: 478px) {.btn.brxe-text-basic {font-size: calc(var(text--s)*.7)}}.btn.brxe-div {align-self: center !important}@media (max-width: 478px) {.btn.brxe-div {font-size: calc(var(text--s)*.7)}}.fluent--style__oc.brxe-xfluentform .fluentform .ff-btn-submit {background-color: var(--action); border-radius: 100px; color: #ffffff; width: 100%}.fluent--style__oc.brxe-xfluentform .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {background-color: var(--action)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group select {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.32)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.32)}.fluent--style__oc.brxe-xfluentform {width: 100%}.fluent--style__oc.brxe-xfluentform .fluentform .ff_submit_btn_wrapper {text-align: center}.color-text_grey.brxe-text-basic {color: #999999}.color-text_grey.brxe-post-content {color: #999999}.width--icon.brxe-image {width: calc(var(--width-s)*.3)}.width--number__home.brxe-text-basic {min-width: 24px; height: 28px; text-align: center; font-size: calc(var(--text-m)*1); font-weight: 400; display: flex; background-color: var(--white-trans-10); max-width: 20px}.fit--content.brxe-div {width: fit-content; row-gap: 10px; column-gap: 7px}.bg--oscuro__oc.brxe-div {background-color: hsl(0, 0%, 9%)}.bg--oscuro__oc.brxe-section {background-color: hsl(0, 0%, 9%)}:root {--bricks-color-acss_import_transparent: transparent;}:root[data-brx-theme="dark"] {--bricks-color-acss_import_transparent: transparent;}#brxe-wrpygd {display: flex; row-gap: 5px; column-gap: 5px}#brxe-wquxhd {top: -8.1em; left: 21.9em}@media (max-width: 478px) {#brxe-wquxhd {left: 3.2em; top: -8.1em}}@media (max-width: 478px) {#brxe-khglrh {width: 60%}}#brxe-rwcxhi {left: 45%; top: -54%; align-self: center !important; align-items: center; row-gap: 18px}@media (max-width: 478px) {#brxe-rwcxhi {left: 39%; top: -51%}}#brxe-zzsqcu {font-weight: 900}#brxe-pmlcrj {font-family: "Instrument Serif"}@media (max-width: 478px) {#brxe-zvxqes {text-align: center}}#brxe-rcptij {row-gap: 6px}#brxe-oizlpv {top: -27px}@media (max-width: 767px) {#brxe-oizlpv {width: 23%}}@media (max-width: 478px) {#brxe-oizlpv {width: 19%}}#brxe-riuhkw {top: 44px; right: -17px}@media (max-width: 767px) {#brxe-riuhkw {width: 34%; top: 16px}}@media (max-width: 478px) {#brxe-riuhkw {width: 29%}}#brxe-jjhjmb {top: -32%; left: 8%}@media (max-width: 767px) {#brxe-jjhjmb {top: -21%}}@media (max-width: 478px) {#brxe-jjhjmb {top: -18%; left: 1%}}#brxe-cquxop {top: 55px}@media (max-width: 767px) {#brxe-cquxop {width: 23%; top: 11px}}@media (max-width: 478px) {#brxe-cquxop {top: 2px}}#brxe-eswrtk {top: 44px; right: -17px; transform: rotateZ(7deg)}@media (max-width: 767px) {#brxe-eswrtk {width: 34%; top: 11px}}@media (max-width: 478px) {#brxe-eswrtk {top: -3px; width: 25%; right: -6px}}#brxe-gumzri {top: 11%; left: 7%}@media (max-width: 767px) {#brxe-gumzri {top: 13%; left: 10%}}@media (max-width: 478px) {#brxe-gumzri {top: 7%; left: -1%}}#brxe-aybnje {top: -73px; transform: rotateY(180deg)}@media (max-width: 767px) {#brxe-aybnje {width: 23%; top: -41px}}@media (max-width: 478px) {#brxe-aybnje {width: 19%}}#brxe-hnnysx {top: -94%; right: -17px}@media (max-width: 767px) {#brxe-hnnysx {top: -37%; width: 34%}}@media (max-width: 478px) {#brxe-hnnysx {width: 29%}}#brxe-qlifst {top: -25%; right: 7%; transform: rotateY(180deg)}@media (max-width: 767px) {#brxe-qlifst {top: -18%}}@media (max-width: 478px) {#brxe-qlifst {top: -14%; right: -1%}}#brxe-cmdgyc {top: 3.4rem; scale: -1 1}@media (max-width: 767px) {#brxe-cmdgyc {width: 23%; top: 0.5rem}}@media (max-width: 478px) {#brxe-cmdgyc {top: 2px}}#brxe-lxdihv {top: 44px; right: -17px}@media (max-width: 767px) {#brxe-lxdihv {width: 34%; top: 7px}}@media (max-width: 478px) {#brxe-lxdihv {width: 25%; top: -3px; right: -4px}}#brxe-haplpg {top: 11%; right: 4%; transform: rotateY(180deg)}@media (max-width: 767px) {#brxe-haplpg {top: 15%; right: 8%}}@media (max-width: 478px) {#brxe-haplpg {top: 8%; right: -2%}}@media (max-width: 478px) {#brxe-xwazws {display: none}}#brxe-gaokrd {width: 99%; display: flex}#brxe-pkrzcv {color: var(--action-ultra-light)}#brxe-tfdyma .bricks-site-logo {height: 27px}@media (max-width: 478px) {#brxe-tfdyma .bricks-site-logo {width: 135px}}@layer bricks {@media (max-width: 767px) {#brxe-moscva .bricks-nav-menu-wrapper { display: none; }#brxe-moscva .bricks-mobile-menu-toggle { display: block; }}}#brxe-moscva .bricks-nav-menu {gap: 22px}#brxe-moscva .bricks-nav-menu > li {margin-left: 0}#brxe-moscva .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-moscva .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-moscva .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-moscva .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-moscva .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-moscva .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-moscva .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-moscva .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-moscva .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-moscva .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-moscva .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-moscva .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-moscva .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-moscva {display: none}}@media (max-width: 478px) {#brxe-ywuywj {display: none}}#lg-contact-trigger:hover {color: var(--white)}@media (max-width: 991px) {#lg-contact-trigger {display: none}}@media (max-width: 767px) {#lg-contact-trigger {display: none}}@media (max-width: 478px) {#lg-contact-trigger {display: none}}#brxe-kczjcc {display: none}@media (max-width: 991px) {#brxe-kczjcc {display: flex}#brxe-kczjcc .x-hamburger-box {--x-burger-size: 1; --x-burger-line-height: 1px; --x-burger-line-radius: 1px}}#lg-header-wrapper {z-index: 999}#brxe-uywauc {background-image: url("/assets/img/uploads/Adobe-Express-2026-02-02-21.50.41-1-1.png"); background-size: cover; background-position: center center; padding-top: 17%; padding-bottom: 50px}@media (max-width: 478px) {#brxe-uywauc {padding-top: 55%; padding-bottom: 0}}#brxe-mvimjz {font-family: "MuseoSans"}#brxe-jahrnr {flex-direction: row}.brxe-kcmprp .brxe-mbcsbt.brxe-post-title {font-family: "MuseoSans"; font-weight: 500}@media (max-width: 478px) {.brxe-kcmprp .brxe-jvjagh.brxe-text-basic {font-size: 12px}}@media (max-width: 478px) {.brxe-kcmprp .brxe-ikiomc.brxe-text-basic {font-size: 12px}}#brxe-axqtrw:not(.tag), #brxe-axqtrw img {object-fit: cover}#brxe-gxisyk {font-family: "MuseoSans"}#brxe-snquwa {padding-top: 80px}#brxe-cwlbvb {width: 100%}#brxe-styibw {width: 22px}#brxe-hspxzt {background-color: hsl(0, 0%, 9%); row-gap: 3px}#brxe-mtqkno {width: 22px}#brxe-hqajlj {background-color: hsl(0, 0%, 9%); row-gap: 3px}#brxe-npcxns {width: 22px}#brxe-rlkikh {background-color: hsl(0, 0%, 9%); row-gap: 3px}#brxe-ntfuwt {width: 22px}#brxe-mhurjn {background-color: hsl(0, 0%, 9%); row-gap: 3px}#brxe-wkvurm {font-size: calc(var(--width-s)*.07); color: var(--white-trans-40); fill: var(--white-trans-40)}#brxe-voguwz {border-top: 1px solid var(--white-trans-60); padding-top: 10px; padding-bottom: 10px; row-gap: 5px}#brxe-wbulsu {font-size: calc(var(--width-s)*.07); color: var(--white-trans-40); fill: var(--white-trans-40)}#brxe-hvlfti {border-top: 1px solid var(--white-trans-60); padding-top: 10px; padding-bottom: 10px; row-gap: 5px}#brxe-myduzp {font-size: calc(var(--width-s)*.07); color: var(--white-trans-40); fill: var(--white-trans-40)}#brxe-viphgc {border-top: 1px solid var(--white-trans-60); padding-top: 10px; padding-bottom: 10px; row-gap: 5px}#brxe-dubruv {font-size: calc(var(--width-s)*.07); color: var(--white-trans-40); fill: var(--white-trans-40)}#brxe-vqbkjp {border-top: 1px solid var(--white-trans-60); padding-top: 10px; padding-bottom: 10px; row-gap: 5px}#brxe-nfppck {width: 26px}#brxe-nyjuia {padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}#brxe-ikowzr {width: 26px}#brxe-mjdslb {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}#brxe-ujgkbv {width: 26px}#brxe-baweut {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}@media (max-width: 478px) {#brxe-oqzcpx {padding-top: 0; grid-gap: 8px}}#brxe-yfrgsk {width: 26px}#brxe-bzkwpq {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}#brxe-nsxonq {width: 26px}#brxe-hnqvpo {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}#brxe-urtdwx {width: 26px}#brxe-hcorhn {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}@media (max-width: 478px) {#brxe-ujiyzo {grid-gap: 8px}}@media (max-width: 478px) {#brxe-sdxjxl {display: flex; flex-direction: column}}#brxe-eraqtn {font-size: 12px}#brxe-kezsaz {font-size: 12px}#brxe-gcktbd {font-size: 12px}#brxe-jgooky {font-size: 12px}#brxe-rbppam {font-size: 12px}#brxe-qzlhsk {column-gap: 2px}#brxe-tcnivi {color: #999999; width: 77%}#brxe-vrehbt {color: #999999}#brxe-xwxwkw {position: absolute; top: 0px; right: 0px; height: 100%}#brxe-xwxwkw:not(.tag), #brxe-xwxwkw img {object-fit: cover}#brxe-ddcgdh {background-position: center center; justify-content: flex-end}#brxe-dnpzvr {font-family: "MuseoSans"; font-weight: 600}#brxe-eufyov {column-gap: 2px}#brxe-wtuxtl {font-family: "MuseoSans"; color: #999999; width: 42%}@media (max-width: 478px) {#brxe-wtuxtl {color: var(--white); width: 93%}}#brxe-tayayl {position: absolute; top: 0px; right: 0px; height: 100%}#brxe-tayayl:not(.tag), #brxe-tayayl img {object-fit: cover}@media (max-width: 478px) {#brxe-tayayl {background-image: linear-gradient(var(--black) 150%, var(--black) 150%)}}#brxe-dvyldl {justify-content: flex-end; background-position: center center}#brxe-dsdrsk {border-top: 1px solid var(--white-trans-20); background-color: #0D0D0D}#brxe-qjdjil {font-family: "MuseoSans"}#brxe-vjgsyj {font-style: normal; font-weight: 500}#brxe-caapwi {font-family: "MuseoSans"}#brxe-oakaia {font-family: "MuseoSans"; font-weight: 500}@media (max-width: 478px) {#brxe-oakaia {overflow: hidden}}#brxe-xzhnrn {font-family: "MuseoSans"}#brxe-eqvwkg {font-family: "MuseoSans"}#contactanos {font-family: "MuseoSans"}@media (max-width: 478px) {#brxe-ljeozg {flex-direction: column}}@layer bricks {@media (max-width: 767px) {#brxe-msztos .bricks-nav-menu-wrapper { display: none; }#brxe-msztos .bricks-mobile-menu-toggle { display: block; }}}#brxe-msztos .bricks-nav-menu {gap: 22px}#brxe-msztos .bricks-nav-menu > li {margin-left: 0}#brxe-msztos .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-msztos .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-msztos {display: none}}#brxe-cjfcwd {background-image: url("/assets/img/uploads/Adobe-Express-2026-02-02-21.50.41-1-1-1.png"); background-size: cover; padding-bottom: 90px; position: relative}:where(#brxe-cjfcwd > *:not(figcaption)) {position: relative}#brxe-cjfcwd::before {background-image: linear-gradient(rgba(0, 0, 0, 0.97) 3%, rgba(0, 0, 0, 0) 59%); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 767px) {#brxe-pupeku .bricks-site-logo {height: 39px}}@media (max-width: 767px) {#brxe-wiyvku {font-size: 33px}}@media (max-width: 478px) {#brxe-wiyvku {font-size: 24px}}@media (max-width: 767px) {#brxe-ueagqx {font-size: 33px}}@media (max-width: 478px) {#brxe-ueagqx {font-size: 24px}}@media (max-width: 767px) {#brxe-yqvdeq .brx-dropdown-content {background-color: var(--action)}#brxe-yqvdeq .brx-dropdown-content > li [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li .aria-current {background-color: var(--action-light)}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li > a {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq .brx-dropdown-content .brx-submenu-toggle > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}}@media (max-width: 767px) {#brxe-jtgpdc {font-size: 33px}}@media (max-width: 478px) {#brxe-jtgpdc {font-size: 24px}}@media (max-width: 767px) {#brxe-pmnjue {font-size: 33px}}@media (max-width: 478px) {#brxe-pmnjue {font-size: 24px}}@media (max-width: 767px) {#brxe-inajeq {font-size: 33px}}@media (max-width: 478px) {#brxe-inajeq {font-size: 24px}}@media (max-width: 767px) {#brxe-yfeuba {margin-top: 61px}#brxe-yfeuba.horizontal .line {border-top-color: var(--white-trans-20)}#brxe-yfeuba.vertical .line {border-right-color: var(--white-trans-20)}#brxe-yfeuba .icon {color: var(--white-trans-20)}}@media (max-width: 478px) {#brxe-jhhgdv {height: 100%}}#brxe-kcmpke {--x-offcanvas-duration: 550ms}@media (max-width: 767px) {#brxe-kcmpke .x-offcanvas_inner {width: 500px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgba(22, 2, 48, 0.96)}#brxe-kcmpke {z-index: 999999}}@media (max-width: 478px) {#brxe-kcmpke .x-offcanvas_inner {width: 340px}}#brxe-boievm {right: 40px; bottom: 98px; transform: translateY(10px)}#brxe-boievm .x-back-to-top_progress-line {stroke: var(--white)}#brxe-boievm .x-back-to-top_icon > * {color: var(--white)}
/*# sourceURL=bricks-frontend-inline-inline-css */
/* from home.html wpcb2-1 */
/* =========================================================================
SOLUCIÓN GLOBAL PARA SECCIÓN CONTACTO (RESPONSIVO MÓVIL)
========================================================================= */
/* 1. Forzamos al Grid principal a no desbordarse jamás */
.oct-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
/* 2. Reglas exclusivas para pantallas móviles y tablets */
@media (max-width: 767px) {
/* Pasamos las filas de Email/Teléfono a diseño vertical */
.oct-info-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
padding: 12px 16px !important;
height: auto !important;
min-height: 0 !important;
}
.brxe-cmdgyc {
transform: scaleX(1) !important;
}
/* Liberamos el ancho fijo de las etiquetas (Email, Teléfono, Ubicación) */
.oct-info-label {
width: auto !important;
color: rgba(255, 255, 255, 0.4) !important;
font-size: 12px !important;
}
/* Rompemos el bloqueo horizontal para que los correos se adapten */
.oct-info-value {
white-space: normal !important;
word-break: break-all !important; /* Si el correo es gigante, se corta elegantemente */
text-align: left !important;
font-size: 14px !important;
width: 100% !important;
}
/* Reducimos los paddings internos de TODAS las tarjetas para ganar espacio */
.oct-card,
#brxe-lmxvlt {
padding: 20px !important;
min-width: 0 !important;
}
/* Reparación del Formulario: Permitimos que los 3 botones de radio salten de línea */
.fluent_form_1 .ff_list_3col .ff-el-input--content {
flex-wrap: wrap !important;
}
.fluent_form_1 .ff_list_3col .ff-el-form-check {
flex: 1 1 calc(50% - 8px) !important; /* Se acomodan en cuadrícula de 2 columnas */
}
}
/* 3. Aseguramos que los inputs nativos de Fluent Forms no empujen la pantalla */
.fluent--style__oc .ff-el-form-control {
width: 100% !important;
box-sizing: border-box !important;
}
.subtittle--service{
color: white;
padding: 5px 10px;
border-radius: 30px;
background-color: transparent;
width: fit-content;
border: solid 1px rgba(255, 255, 255, 0.176);
font-size: var(--text-s);
}
.bg--services__cards{
background: #0B0B0B;
border-radius: 17px;
padding: 27px;
}
.bg--imp{
background: #0B0B0B;
border-radius: 17px;
padding: 15px;
gap: 7px;
}
.regional--inicio__estilo{
padding: 10px;
}
/* Contenedor y espaciadores base */
.w-full { width: 100% !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.relative { position: relative !important; }
.z-10 { z-index: 10 !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
/* Animaciones y transiciones de los ítems con aceleración por hardware */
.faq-item {
background-color: rgba(13, 10, 20, 0.65) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 1rem !important; /* Equivalente a rounded-2xl */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: background-color, border-color, box-shadow;
}
/* Hover del ítem */
.faq-item:hover {
border-color: rgba(168, 85, 247, 0.2) !important;
}
/* Estado Activo (Abierto) */
.faq-item.active {
background-color: rgba(88, 28, 135, 0.2) !important; /* bg-purple-950/20 */
border-color: rgba(168, 85, 247, 0.4) !important; /* border-purple-500/20 */
box-shadow: 0 10px 15px -3px rgba(168, 85, 247, 0.1), 0 4px 6px -2px rgba(168, 85, 247, 0.1) !important;
}
/* Botón de la Pregunta */
.faq-item button {
width: 100% !important;
text-align: left !important;
padding: 1.25rem 1.5rem !important; /* py-5 px-6 */
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem !important;
color: #ffffff !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
outline: none !important;
transition: color 0.2s ease !important;
}
.faq-item button:hover {
color: #c084fc !important; /* text-purple-300 */
}
/* Texto de la pregunta */
.faq-item button span:first-child {
font-weight: 500 !important;
font-size: 0.875rem !important; /* text-sm */
letter-spacing: 0.025em !important; /* tracking-wide */
color: #ffffff !important;
}
@media (min-width: 640px) {
.faq-item button span:first-child {
font-size: 1rem !important; /* sm:text-base */
}
}
/* Icono circular + / - */
.faq-icon {
flex-shrink: 0 !important;
width: 2rem !important; /* w-8 (32px) */
height: 2rem !important; /* h-8 (32px) */
border-radius: 9999px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.125rem !important; /* text-lg */
color: #ffffff !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease !important;
will-change: transform;
}
/* Respuesta ocultable */
.faq-answer {
max-height: 0;
overflow: hidden !important;
padding-left: 1.5rem !important; /* px-6 */
padding-right: 1.5rem !important;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: max-height;
}
/* Párrafo dentro de la respuesta */
.faq-answer p {
padding-bottom: 1.25rem !important; /* pb-5 */
color: #9ca3af !important; /* text-gray-400 */
font-size: 0.75rem !important; /* text-xs */
line-height: 1.625 !important; /* leading-relaxed */
margin: 0 !important;
}
@media (min-width: 640px) {
.faq-answer p {
font-size: 0.875rem !important; /* sm:text-sm */
}
}
/* Estructura y Caja del Componente */
.octopus-contact-section {
width: 100% !important;
margin: 0 auto !important;
padding: 2rem 1rem !important;
box-sizing: border-box !important;
color: #ffffff !important;
}
.octopus-contact-section * {
box-sizing: border-box !important;
}
/* Grid Responsivo de 2 Columnas */
.oct-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
@media (min-width: 1024px) {
.oct-grid {
grid-template-columns: 1.1fr 1.9fr !important;
gap: 2rem !important;
}
}
/* Columna de tarjetas de información de contacto (Izquierda) */
.oct-info-column {
display: flex !important;
flex-direction: column !important;
gap: 1.5rem !important;
}
/* Estilo de Tarjetas Oscuras (Cards) */
.oct-card {
background-color: #0D0D0D !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 1.75rem !important;
padding: 2rem !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
/* Encabezados de Tarjetas */
.oct-card-header {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
margin-bottom: 1.5rem !important;
}
.oct-card-title {
font-size: 1.25rem !important;
font-weight: 600 !important;
color: #ffffff !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
}
/* Filas de Información de Contacto */
.oct-info-list {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
.oct-info-row {
display: flex !important;
align-items: center !important;
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 0.75rem !important;
padding: 0.85rem 1.25rem !important;
font-size: 0.875rem !important;
min-height: 48px !important;
}
.oct-info-label {
color: rgba(255, 255, 255, 0.4) !important;
width: 90px !important;
flex-shrink: 0 !important;
font-weight: 700 !important;
}
.oct-info-value {
color: #ffffff !important;
font-weight: 400 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Estilos del Formulario Inteligente (Derecha) */
.oct-form-header-icon {
width: 2.75rem !important;
height: 2.75rem !important;
border-radius: 9999px !important;
border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 1.5rem !important;
}
.oct-form-title {
font-size: 1.75rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
margin-top: 0 !important;
margin-bottom: 0.75rem !important;
letter-spacing: -0.02em !important;
}
.oct-form-description {
font-size: 0.95rem !important;
color: rgba(255, 255, 255, 0.5) !important;
line-height: 1.5 !important;
margin-top: 0 !important;
margin-bottom: 2rem !important;
}
/* Grid de Campos del Formulario */
.oct-form-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
margin-bottom: 1rem !important;
}
@media (min-width: 640px) {
.oct-form-grid {
grid-template-columns: 1fr 1fr !important;
}
}
/* Inputs y Selects Estilizados */
.oct-input-wrapper {
position: relative !important;
}
.oct-field {
width: 100% !important;
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 0.75rem !important;
padding: 0.85rem 1.15rem !important;
font-size: 0.9rem !important;
color: #ffffff !important;
outline: none !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.oct-field:focus {
border-color: rgba(164, 107, 253, 0.6) !important;
box-shadow: 0 0 0 2px rgba(164, 107, 253, 0.15) !important;
}
.oct-field::placeholder {
color: rgba(255, 255, 255, 0.25) !important;
}
/* Personalización del Select Dropdown */
select.oct-field {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 1.1rem !important;
padding-right: 2.5rem !important;
cursor: pointer !important;
}
/* Opción de fondo para el select en navegadores */
select.oct-field option {
background-color: #0D0D0D !important;
color: #ffffff !important;
}
/* Textarea */
textarea.oct-field {
resize: vertical !important;
min-height: 120px !important;
}
/* Sección Preferencia de Contacto */
.oct-preference-section {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
margin: 1.5rem 0 !important;
}
@media (min-width: 640px) {
.oct-preference-section {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 1.5rem !important;
}
}
.oct-preference-label {
font-size: 0.875rem !important;
color: rgba(255, 255, 255, 0.6) !important;
font-weight: 500 !important;
}
.oct-preference-options {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.75rem !important;
}
/* Botón de Opción de Contacto */
.oct-pref-btn {
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 0.75rem !important;
padding: 0.6rem 1.15rem !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
user-select: none !important;
}
.oct-pref-btn svg {
transition: stroke 0.25s ease !important;
}
.oct-pref-btn:hover {
border-color: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}
/* Estado seleccionado interactivo */
.oct-pref-btn.selected {
background-color: rgba(164, 107, 253, 0.1) !important;
border-color: rgba(164, 107, 253, 0.6) !important;
color: #ffffff !important;
box-shadow: 0 0 10px rgba(164, 107, 253, 0.1) !important;
}
/* Checkbox de Privacidad Personalizado */
.oct-checkbox-wrapper {
display: flex !important;
align-items: flex-start !important;
gap: 0.75rem !important;
margin: 1.5rem 0 !important;
cursor: pointer !important;
user-select: none !important;
}
.oct-checkbox-container {
position: relative !important;
display: inline-block !important;
width: 1.15rem !important;
height: 1.15rem !important;
flex-shrink: 0 !important;
margin-top: 0.15rem !important;
}
.oct-checkbox-container input {
position: absolute !important;
opacity: 0 !important;
cursor: pointer !important;
height: 0 !important;
width: 0 !important;
}
.oct-checkmark {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 0.25rem !important;
transition: all 0.2s ease !important;
}
.oct-checkbox-container input:checked ~ .oct-checkmark {
background-color: #A46BFD !important;
border-color: #A46BFD !important;
}
.oct-checkmark:after {
content: "" !important;
position: absolute !important;
display: none !important;
left: 5px !important;
top: 2px !important;
width: 5px !important;
height: 8px !important;
border: solid white !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
}
.oct-checkbox-container input:checked ~ .oct-checkmark:after {
display: block !important;
}
.oct-checkbox-text {
font-size: 0.75rem !important;
color: rgba(255, 255, 255, 0.45) !important;
line-height: 1.4 !important;
}
/* Botón Enviar Mensaje */
.oct-submit-btn {
width: 100% !important;
background: linear-gradient(135deg, #A46BFD 0%, #8b44fd 100%) !important;
color: #ffffff !important;
border: none !important;
border-radius: 9999px !important;
padding: 1rem 2rem !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 10px 15px -3px rgba(164, 107, 253, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
letter-spacing: 0.015em !important;
}
.oct-submit-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 20px -3px rgba(164, 107, 253, 0.4) !important;
filter: brightness(1.1) !important;
}
.oct-submit-btn:active {
transform: translateY(0) !important;
}
/* Redes Sociales al Final */
.oct-social-footer {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 1.25rem !important;
margin-top: 2rem !important;
}
.oct-social-icon {
color: rgba(255, 255, 255, 0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.2s ease, transform 0.2s ease !important;
text-decoration: none !important;
}
.oct-social-icon:hover {
color: #ffffff !important;
transform: scale(1.1) !important;
}
.filtro-seccion {
background-color: transparent; /* Se adapta al fondo negro de tu web */
color: #ffffff;
max-width: 500px;
}
.botones-filtro {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 25px;
}
.btn-filtro {
background: transparent;
color: #ffffff;
border: 1px solid #444;
padding: 8px 18px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
/* Estado Activo (Morado como en tu diseño) */
.btn-filtro.active {
background-color: #8b5cf6;
border-color: #8b5cf6;
color: white;
}
.bloques-info {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Estilo de las etiquetas (Azul/Verde azulado de la imagen) */
.item-info {
background-color: #146c78;
color: #ffffff;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
}
/* Clase para ocultar elementos con una transición suave */
.item-info.hide {
display: none;
opacity: 0;
}
/* Contenedor Wrapper que reserva el espacio físico en el flujo de la página */
.lg-header-wrapper {
width: 100%;
max-width: 1020px;
margin: 0 auto;
min-height: 68px; /* Altura exacta del menú para evitar saltos al volverse fixed */
padding: 0 var(--space-m, 1.5rem);
box-sizing: border-box;
}
/* El contenedor del header por defecto fluye de manera relativa */
.lg-header-container {
width: 100%;
max-width: 1020px;
box-sizing: border-box;
transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Estado pegajoso arriba: Se activa vía JS cuando se pasa su posición original */
.lg-header-container.lg-scrolled {
position: fixed;
top: 12px; /* Espacio de holgura superior */
left: 50%;
transform: translateX(-50%);
width: calc(100% - var(--space-m, 1.5rem) * 2);
max-width: 1020px;
z-index: 9999;
}
/* LA CÁPSULA INTERNA (EFECTO LIQUID GLASS) */
.lg-capsule {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-s, 12px) var(--space-l, 20px) var(--space-s, 12px) var(--space-xl, 32px);
border-radius: 9999px;
box-sizing: border-box;
width: 100%;
/* Efectos Liquid Glass (Cristal Líquido translúcido) */
background: rgba(10, 10, 12, 0.48);
backdrop-filter: blur(36px) saturate(220%);
-webkit-backdrop-filter: blur(36px) saturate(220%);
border: 1px solid rgba(255, 255, 255, 0.12);
/* Biselado e iluminación interna */
box-shadow:
inset 0 1.5px 0px 0px rgba(255, 255, 255, 0.32),
inset 0 -1.5px 3px 0px rgba(0, 0, 0, 0.6),
0 25px 60px -15px rgba(0, 0, 0, 0.95);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Modificación de la cápsula cuando el contenedor está en estado scrolled */
.lg-header-container.lg-scrolled .lg-capsule {
padding-top: var(--space-xs, 8px);
padding-bottom: var(--space-xs, 8px);
background: rgba(8, 8, 10, 0.65);
box-shadow:
inset 0 1px 0px 0px rgba(255, 255, 255, 0.25),
inset 0 -1px 2px 0px rgba(0, 0, 0, 0.7),
0 15px 40px -10px rgba(0, 0, 0, 0.95);
}
/* Elementos del Logotipo */
.lg-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
user-select: none;
}
.lg-logo-text {
font-weight: 700;
font-size: 16px;
letter-spacing: 0.35em;
color: #ffffff;
}
.lg-logo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Enlaces del Menú (Desktop) */
.lg-nav-menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
gap: var(--space-l, 40px);
}
@media (min-width: 768px) {
.lg-nav-menu {
display: flex;
align-items: center;
}
}
.lg-nav-link {
color: #e4e4e7;
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.25s ease;
}
.lg-nav-link:hover {
color: #ffffff;
}
/* Chevrons */
.lg-chevron {
color: #71717a;
transition: color 0.2s;
}
.lg-nav-link:hover .lg-chevron,
.lg-country-pill:hover .lg-chevron {
color: #ffffff;
}
/* Acciones */
.lg-actions {
display: flex;
align-items: center;
gap: var(--space-s, 16px);
}
.lg-country-selector {
position: relative;
}
.lg-country-pill {
background: rgba(24, 24, 27, 0.75);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 9999px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 10px;
color: #e4e4e7;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.lg-country-pill:hover {
background: rgba(39, 39, 42, 0.9);
border-color: rgba(255, 255, 255, 0.15);
}
/* Desplegable de países */
.lg-dropdown-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 12px);
width: 144px;
border-radius: 16px;
padding: 6px;
z-index: 999;
box-sizing: border-box;
background: rgba(10, 10, 12, 0.85);
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
inset 0 1px 0px 0px rgba(255, 255, 255, 0.2),
0 15px 35px rgba(0, 0, 0, 0.8);
}
.lg-dropdown-menu.show {
display: block;
animation: lgFadeIn 0.2s ease-out;
}
@keyframes lgFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.lg-dropdown-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
color: #e4e4e7;
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-radius: 12px;
transition: background-color 0.2s, color 0.2s;
}
.lg-dropdown-menu a:hover {
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
/* Botón Premium Sólido */
.lg-btn-contact {
background-color: #9d66ff;
color: #ffffff;
border-radius: 9999px;
padding: 10px 24px;
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.25s ease;
box-shadow: 0 4px 15px rgba(157, 102, 255, 0.3);
border: none;
cursor: pointer;
}
.lg-btn-contact:hover {
background-color: #aa7aff;
box-shadow: 0 6px 20px rgba(157, 102, 255, 0.5);
transform: translateY(-1px);
}
.lg-btn-contact:active {
transform: translateY(1px);
}
/* Contenedor principal de la placa (Cápsula oscura de cristal) */
.confianza-badge {
position: relative;
display: inline-flex;
align-items: center;
/* Fondo oscuro ultra traslúcido extraído de la captura */
background: rgba(22, 10, 45, 0.65);
/* Borde fino sutil con un tono violeta muy suave */
border: 1px solid rgba(168, 85, 247, 0.18);
border-radius: 9999px;
padding: 8px 20px 8px 12px;
user-select: none;
outline: none;
overflow: hidden; /* Necesario para el efecto de brillo interior */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-sizing: border-box;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* --- GRUPO DE AVATARES --- */
.avatar-group {
display: flex;
align-items: center;
margin-right: 12px;
}
/* Elemento Avatar individual */
.avatar-item {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
/* Borde oscuro para separación perfecta entre caras */
border: 1.5px solid #14052b;
/* Efecto de superposición */
margin-right: -38px;
transition: transform 0.3s ease, margin-right 0.3s ease;
display: block;
}
/* Evitar margen negativo en el último avatar */
.avatar-item:last-child {
margin-right: 0;
}
/* --- TEXTO DEL COMPONENTE --- */
.confianza-texto {
color: rgba(255, 255, 255, 0.9);
font-size: 14.5px;
font-weight: 400;
letter-spacing: -0.1px;
line-height: 1;
white-space: nowrap;
transition: color 0.3s ease;
}
/* Agrega esta clase a tu elemento HTML */
.tarjeta-premium {
background-color: #121212;
border-radius: 26px;
padding: 34px 30px 30px 30px;
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
inset 0 1px 1px rgba(255, 255, 255, 0.18);
max-width: 460px;
width: 100%;
}
/* Estilos complementarios para los textos */
.tarjeta-titulo {
color: #ffffff;
font-size: var(--h4);
font-weight: 500;
letter-spacing: -0.5px;
line-height: 1.25;
}
.tarjeta-descripcion {
color: #85858a;
font-size: var(--text-s);
line-height: 1.45;
margin: 0;
}
/* Estilos de la sección principal y fondo con degradado premium */
.bricks-imp-section {
background-color: #030303;
background-image: radial-gradient(circle at 50% 20%, #111112 0%, #030303 70%);
padding: 80px 24px;
width: 100%;
display: flex;
justify-content: center;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bricks-imp-section * {
box-sizing: border-box;
}
/* Contenedor adaptativo */
.bricks-imp-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: start;
}
/* Distribución en Escritorio (Lg) */
@media (min-width: 1024px) {
.bricks-imp-container {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 64px;
}
.bricks-imp-col-left {
grid-column: span 5 / span 5;
background-color: #0d0d0e !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 28px !important;
padding: 28px !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
inset 0 1px 1px rgba(255, 255, 255, 0.04) !important;
}
.bricks-imp-col-right {
grid-column: span 7 / span 7;
}
}
/* --- COLUMNA DE PASOS (IZQUIERDA) --- */
.bricks-imp-header {
margin-bottom: 40px;
}
.bricks-imp-badge {
display: inline-block;
padding: 6px 14px;
font-size: 11px;
font-weight: 500;
color: #a1a1aa;
border: 1px solid rgba(255, 255, 255, 0.08);
background-color: rgba(24, 24, 27, 0.4);
border-radius: 9999px;
letter-spacing: 0.5px;
margin-bottom: 16px;
text-transform: uppercase;
}
.bricks-imp-title {
font-size: 38px;
font-weight: 700;
color: #ffffff;
letter-spacing: -1px;
line-height: 1.15;
margin: 0;
}
@media (min-width: 768px) {
.bricks-imp-title {
font-size: 46px;
}
}
.bricks-imp-steps-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.bricks-imp-step {
display: flex;
gap: 20px;
align-items: start;
}
.bricks-imp-step__number {
width: 42px;
height: 42px;
background-color: #0d0d0e;
border: 1px solid rgba(255, 255, 255, 0.06);
color: #e4e4e7;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: border-color 0.2s ease;
}
.bricks-imp-step:hover .bricks-imp-step__number {
border-color: rgba(255, 255, 255, 0.15);
}
.bricks-imp-step__title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin: 0 0 4px 0;
letter-spacing: -0.2px;
}
.bricks-imp-step__desc {
font-size: 14px;
color: #a1a1aa;
margin: 0;
line-height: 1.55;
}
/* Flecha divisora */
.bricks-imp-arrow {
width: 16px;
height: 16px;
color: #3f3f46;
margin-left: 13px;
}
/* --- COLUMNA DE TARJETAS Y FORMULARIO (DERECHA) --- */
.bricks-imp-metrics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.bricks-imp-card-metric {
background-color: #0d0d0e;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 24px;
text-align: center;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6),
inset 0 1px 1px rgba(255, 255, 255, 0.03);
}
.bricks-imp-card-metric__num {
font-size: 32px;
font-weight: 700;
color: #ffffff;
display: block;
letter-spacing: -0.5px;
}
@media (min-width: 768px) {
.bricks-imp-card-metric__num {
font-size: 38px;
}
}
.bricks-imp-card-metric__label {
font-size: 11px;
color: #a1a1aa;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
display: block;
}
/* Tarjeta contenedora del formulario */
.bricks-imp-form-card {
background-color: #0d0d0e;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 28px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
inset 0 1px 1px rgba(255, 255, 255, 0.04);
}
@media (min-width: 768px) {
.bricks-imp-form-card {
padding: 40px;
}
}
.bricks-imp-form-card__icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: #a1a1aa;
margin-bottom: 24px;
}
.bricks-imp-form-card__title {
font-size: 22px;
font-weight: 600;
color: #ffffff;
margin: 0 0 10px 0;
line-height: 1.3;
letter-spacing: -0.5px;
}
@media (min-width: 768px) {
.bricks-imp-form-card__title {
font-size: 26px;
}
}
.bricks-imp-form-card__desc {
font-size: 14px;
color: #a1a1aa;
margin: 0 0 32px 0;
line-height: 1.55;
}
.bricks-imp-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.bricks-imp-form__row {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 640px) {
.bricks-imp-form__row {
grid-template-columns: 1fr 1fr;
}
}
.bricks-imp-field {
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.05);
color: #ffffff;
border-radius: 12px;
padding: 13px 16px;
font-size: 14.5px;
width: 100%;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bricks-imp-field::placeholder {
color: #4b4b4f;
}
.bricks-imp-field:focus {
outline: none;
border-color: rgba(139, 92, 246, 0.6);
background-color: #151517;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
/* Icono de flecha para el selector */
.bricks-imp-select-wrapper {
position: relative;
width: 100%;
}
.bricks-imp-select-wrapper select {
appearance: none;
padding-right: 40px;
}
.bricks-imp-select-wrapper::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 6px;
background-color: #52525b;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
pointer-events: none;
}
.bricks-imp-textarea {
resize: none;
min-height: 90px;
}
/* Píldoras de Preferencia de Contacto */
.bricks-imp-pills-label {
font-size: 12.5px;
color: #a1a1aa;
font-weight: 500;
margin-bottom: 10px;
display: block;
}
.bricks-imp-pills-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.bricks-imp-pill {
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 9px 18px;
border-radius: 9999px;
font-size: 13px;
color: #a1a1aa;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.bricks-imp-pill:hover {
border-color: rgba(255, 255, 255, 0.12);
color: #e4e4e7;
}
.bricks-imp-pill.is-active {
background-color: #1d1d20;
border-color: rgba(255, 255, 255, 0.18);
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Checkbox de Privacidad */
.bricks-imp-checkbox-row {
display: flex;
align-items: start;
gap: 10px;
padding-top: 4px;
}
.bricks-imp-checkbox {
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: #8b5cf6;
cursor: pointer;
}
.bricks-imp-checkbox-label {
font-size: 11px;
color: #52525b;
line-height: 1.4;
cursor: pointer;
user-select: none;
}
/* Botón de Enviar */
.bricks-imp-submit {
background-color: #8b5cf6;
color: #ffffff;
font-weight: 500;
font-size: 14.5px;
border-radius: 9999px;
padding: 14px 28px;
border: none;
cursor: pointer;
width: 100%;
text-align: center;
transition: all 0.2s ease;
display: block;
}
.bricks-imp-submit:hover {
background-color: #7c3aed;
box-shadow: 0 0 24px rgba(139, 92, 246, 0.4);
transform: translateY(-1px);
}
.bricks-imp-submit:active {
transform: translateY(0);
}
/* Redes sociales en pie de tarjeta */
.bricks-imp-socials {
display: flex;
justify-content: center;
gap: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
margin-top: 8px;
}
.bricks-imp-social-link {
font-size: 12px;
color: #52525b;
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease;
}
.bricks-imp-social-link:hover {
color: #a1a1aa;
}
/* --- VENTANA MODAL EMERGENTE (SUCESO DE ENVÍO) --- */
.bricks-imp-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.bricks-imp-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.bricks-imp-modal-card {
background-color: #0e0e0f;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 32px;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
}
.bricks-imp-modal-check {
width: 56px;
height: 56px;
background-color: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.3);
color: #a78bfa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px auto;
font-size: 24px;
}
.bricks-imp-modal-title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin: 0 0 8px 0;
}
.bricks-imp-modal-text {
font-size: 13px;
color: #a1a1aa;
line-height: 1.5;
margin: 0 0 24px 0;
}
.bricks-imp-modal-btn {
width: 100%;
padding: 11px;
background-color: #1e1e1f;
border: 1px solid rgba(255, 255, 255, 0.05);
color: #ffffff;
font-weight: 500;
font-size: 13px;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.bricks-imp-modal-btn:hover {
background-color: #27272a;
}
bg--comohacemos{
background-color: #0d0d0e !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 28px !important;
padding: 28px !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
inset 0 1px 1px rgba(255, 255, 255, 0.04) !important;
}
/* Estilos de la sección principal y fondo con degradado premium */
.bricks-contact-section {
background-color: #030303;
background-image: radial-gradient(circle at 50% 50%, #111112 0%, #030303 100%);
padding: 80px 24px;
width: 100%;
display: flex;
justify-content: center;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bricks-contact-section * {
box-sizing: border-box;
}
/* Contenedor adaptativo en rejilla */
.bricks-contact-container {
max-width: 1100px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
/* Distribución en Escritorio (Lg) a 2 columnas */
@media (min-width: 992px) {
.bricks-contact-container {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
/* --- TARJETA PREMIUM ESTILO OSCURO --- */
.bricks-contact-card {
background-color: #0d0d0e;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 36px;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7),
inset 0 1px 1px rgba(255, 255, 255, 0.03);
display: flex;
flex-direction: column;
gap: 28px;
}
/* Cabecera de la tarjeta con alineación minimalista */
.bricks-contact-header {
display: flex;
align-items: center;
gap: 12px;
}
.bricks-contact-icon {
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bricks-contact-title {
font-size: 24px;
font-weight: 500;
color: #ffffff;
margin: 0;
letter-spacing: -0.5px;
}
/* Contenedor de filas de información */
.bricks-contact-rows {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Fila individual estilo píldora/caja */
.bricks-contact-row {
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 14px;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.bricks-contact-row:hover {
border-color: rgba(255, 255, 255, 0.08);
background-color: #151517;
}
.bricks-contact-row__label {
font-size: 14.5px;
font-weight: 400;
color: #85858a;
flex-shrink: 0;
}
.bricks-contact-row__value {
font-size: 14.5px;
font-weight: 400;
color: #ffffff;
text-align: right;
text-decoration: none;
word-break: break-all;
transition: color 0.2s ease;
}
/* Efecto hover suave para enlaces interactivos */
.bricks-contact-row__value[href]:hover {
color: #a78bfa; /* Sutil tono violeta de acento */
}
/* Adaptabilidad para móviles pequeños */
@media (max-width: 480px) {
.bricks-contact-card {
padding: 24px;
}
.bricks-contact-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 14px 16px;
}
.bricks-contact-row__value {
text-align: left;
}
}
/* RESETEADOR INTERNO DEL COMPONENTE */
.pricing-section * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CONTENEDOR PRINCIPAL */
.pricing-section {
background-color: #050506;
color: #94A3B8;
padding: 40px 16px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
/* REJILLA RESPONSIVA DE TARJETAS (GRID) */
.pricing-section__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
max-width: 1240px;
}
@media (min-width: 640px) {
.pricing-section__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.pricing-section__grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* BLOQUE: TARJETA DE PRECIOS */
.pricing-card {
background-color: #0E0E11;
border: 1.5px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
padding: 32px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.pricing-card:hover {
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
}
/* MODIFICADOR: TARJETA DESTACO / RECOMENDADO ("Plan estándar") */
.pricing-card--featured {
border-color: #8B5CF6;
box-shadow: 0 0 24px rgba(139, 92, 246, 0.15);
}
.pricing-card--featured:hover {
border-color: #A78BFA;
box-shadow: 0 0 32px rgba(139, 92, 246, 0.25);
}
/* ELEMENTO: INSIGNIA "MEJOR OPCIÓN" */
.pricing-card__badge {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background-color: #8B5CF6;
color: #FFFFFF;
font-size: 11px;
font-weight: 600;
padding: 6px 16px;
border-radius: 9999px;
text-transform: none;
white-space: nowrap;
letter-spacing: 0.02em;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
/* ELEMENTO: CABECERA Y DETALLES DEL PLAN */
.pricing-card__header {
margin-bottom: 24px;
}
.pricing-card__title {
font-size: 22px;
font-weight: 500;
color: #FFFFFF;
margin-bottom: 16px;
}
/* CONTENEDOR DE PRECIOS */
.pricing-card__price-box {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 4px;
}
.pricing-card__currency {
font-size: 28px;
font-weight: 600;
color: #FFFFFF;
align-self: flex-start;
margin-top: 4px;
}
.pricing-card__price {
font-size: 52px;
font-weight: 700;
color: #FFFFFF;
line-height: 1;
}
.pricing-card__period {
font-size: 12px;
color: #94A3B8;
font-weight: 400;
margin-left: 4px;
}
/* TEXTO DE FACTURACIÓN ANUAL */
.pricing-card__billing-info {
font-size: 11px;
color: #64748B;
margin-bottom: 8px;
font-weight: 400;
}
/* SUB-ETIQUETA (E.G. HASTA 2 USUARIOS) */
.pricing-card__sub-label {
font-size: 13px;
color: #94A3B8;
margin-bottom: 8px;
font-weight: 400;
}
/* ELEMENTO: BOTÓN DE ACCIÓN */
.pricing-card__button {
display: block;
width: 100%;
background-color: #8B5CF6;
color: #FFFFFF;
text-align: center;
padding: 14px;
border-radius: 9999px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
margin: 16px 0 24px 0;
transition: background-color 0.2s ease, transform 0.1s ease;
border: none;
cursor: pointer;
}
.pricing-card__button:hover {
background-color: #7C3AED;
}
.pricing-card__button:active {
transform: scale(0.98);
}
/* ELEMENTO: DESCRIPCIÓN DEL PLAN */
.pricing-card__description {
font-size: 13px;
line-height: 1.5;
color: #94A3B8;
margin-bottom: 24px;
min-height: 40px;
}
/* SECCIÓN DE CARACTERÍSTICAS INCLUIDAS */
.pricing-card__features {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 20px;
}
.pricing-card__features-title {
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
margin-bottom: 12px;
}
.pricing-card__features-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.pricing-card__feature-item {
font-size: 12px;
color: #94A3B8;
line-height: 1.4;
display: flex;
align-items: flex-start;
}
/* RESETEADOR INTERNO DEL COMPONENTE (Heredando tipografías de tu proyecto) */
.sales-booster * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CONTENEDOR PRINCIPAL DEL COMPONENTE */
.sales-booster {
background-color: #050506;
color: #FFFFFF;
padding: 60px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
}
/* ELEMENTO: TÍTULO PRINCIPAL */
.sales-booster__title {
font-size: 32px;
font-weight: 700;
text-align: center;
margin-bottom: 48px;
color: #FFFFFF;
letter-spacing: -0.02em;
}
@media (min-width: 768px) {
.sales-booster__title {
font-size: 48px;
}
}
/* MODIFICADOR/ELEMENTO EN ÉNFASIS DEL TÍTULO */
.sales-booster__title-accent {
font-style: italic;
font-weight: 400;
color: #E2E8F0;
margin-left: 8px;
}
/* BLOQUE: INTERFAZ DEL CHAT (VENTANA PRINCIPAL) */
.sales-booster__chat-window {
background-color: #0E0E11;
border: 1.5px solid rgba(0, 150, 255, 0.35);
border-radius: 28px;
width: 100%;
max-width: 820px;
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 150, 255, 0.08);
}
/* ELEMENTO: CABECERA DEL CHAT */
.sales-booster__chat-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* ELEMENTO: AVATAR DE LA IA */
.sales-booster__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #26C6DA;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sales-booster__avatar-icon {
width: 24px;
height: 24px;
color: #0E0E11;
}
/* ELEMENTO: DETALLES DE CONEXIÓN */
.sales-booster__meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.sales-booster__agent-name {
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
}
.sales-booster__agent-status {
font-size: 12px;
color: #00D8C6;
font-weight: 500;
}
/* ELEMENTO: CUERPO DEL CHAT (ZONA DE MENSAJES) */
.sales-booster__chat-body {
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px 24px;
}
/* BLOQUE: MENSAJE INDIVIDUAL */
.chat-message {
display: flex;
width: 100%;
}
/* MODIFICADOR: MENSAJE DEL USUARIO (DERECHA) */
.chat-message--user {
justify-content: flex-end;
}
/* MODIFICADOR: MENSAJE DE LA IA (IZQUIERDA) */
.chat-message--ai {
justify-content: flex-start;
}
/* MODIFICADOR: ACCIÓN DE PAGO (CENTRO) */
.chat-message--action {
justify-content: center;
margin-top: 8px;
}
/* ELEMENTO: BURBUJA DE TEXTO GENERAL */
.chat-message__bubble {
max-width: 85%;
padding: 16px 20px;
border-radius: 20px;
font-size: 14px;
line-height: 1.5;
color: #FFFFFF;
/* Soporte para el efecto Liquid Glass (difumina el fondo) */
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: transform 0.2s ease;
}
@media (min-width: 768px) {
.chat-message__bubble {
max-width: 70%;
font-size: 15px;
}
}
/* BURBUJAS - ESTILO LIQUID GLASS ESPECÍFICO */
/* Burbuja del Usuario (Morado Brillante) */
.chat-message__bubble--user {
background-color: rgba(45, 27, 78, 0.45);
border: 1.5px solid rgba(139, 92, 246, 0.4);
border-bottom-right-radius: 4px;
/* Brillo de reflexión interna para emular cristal grueso */
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15),
0 8px 32px rgba(139, 92, 246, 0.05);
}
/* Burbuja de la IA (Cian/Azul Verdoso) */
.chat-message__bubble--ai {
background-color: rgba(14, 68, 82, 0.45);
border: 1.5px solid rgba(38, 198, 218, 0.45);
border-bottom-left-radius: 4px;
/* Brillo de reflexión interna para emular cristal grueso */
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15),
0 8px 32px rgba(38, 198, 218, 0.05);
}
/* Burbuja de Acción de Pago (Verde Esmeralda Líquido) */
.chat-message__bubble--action {
background-color: rgba(27, 122, 43, 0.5);
border: 1.5px solid rgba(34, 197, 94, 0.45);
border-radius: 16px;
text-align: center;
font-weight: 600;
padding: 18px 32px;
max-width: 100%;
/* Brillo de reflexión interna más pronunciado */
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25),
0 12px 36px rgba(34, 197, 94, 0.15);
}
/* ELEMENTOS INTERNOS DE TEXTO */
.chat-message__text {
white-space: pre-line;
}
.chat-message__text--bold {
font-weight: 700;
display: block;
margin-top: 4px;
font-size: 16px;
}
/* RESETEADOR INTERNO DEL COMPONENTE */
.mercat-features * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CONTENEDOR PRINCIPAL DEL COMPONENTE */
.mercat-features {
background-color: #050506;
color: #FFFFFF;
padding: 40px 16px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/* REJILLA RESPONSIVA DE TARJETAS (GRID BEM) */
.mercat-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
max-width: 1140px;
}
@media (min-width: 768px) {
.mercat-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.mercat-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* BLOQUE: TARJETA INDIVIDUAL (CARD) */
.mercat-card {
background-color: #0E0E11;
border: 1.5px solid rgba(255, 255, 255, 0.04);
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.mercat-card:hover {
border-color: rgba(139, 92, 246, 0.25);
transform: translateY(-4px);
}
/* ELEMENTO: CONTENEDOR DE MEDIOS / ILUSTRACIÓN */
.mercat-card__media {
width: 100%;
height: 200px;
border-radius: 16px;
overflow: hidden;
background-color: #070709;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.03);
}
/* ELEMENTO: IMAGEN REAL ESTÁTICA */
.mercat-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.mercat-card:hover .mercat-card__image {
transform: scale(1.02);
}
/* ELEMENTO: DETALLES DE TEXTO */
.mercat-card__content {
display: flex;
flex-direction: column;
gap: 8px;
}
.mercat-card__title {
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.01em;
line-height: 1.3;
}
.mercat-card__desc {
font-size: 13px;
line-height: 1.6;
color: #94A3B8;
}
/* RESETEADOR INTERNO DEL COMPONENTE */
.octopus-section * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CONTENEDOR DE LA SECCIÓN PRINCIPAL (Simulación de fondo oscuro para el Preview) */
.octopus-section {
background-color: #050506;
color: #FFFFFF;
padding: 48px 16px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
/* DISEÑO DE REJILLA RESPONSIVA (GRID BEM) */
.octopus-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
max-width: 1140px;
align-items: stretch;
}
@media (min-width: 1024px) {
.octopus-grid {
grid-template-columns: 5fr 7fr;
}
}
/* ==================================================== */
/* BLOQUE: TARJETA DE CUALIFICACIÓN (QUALIFIER CARD) */
/* ==================================================== */
.qualifier-card {
background-color: #0E0E11;
border: 1.5px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 32px 24px;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
transition: border-color 0.3s ease;
}
@media (min-width: 768px) {
.qualifier-card {
padding: 40px;
}
}
.qualifier-card:hover {
border-color: rgba(255, 255, 255, 0.08);
}
/* ELEMENTO: INSIGNIA / BADGE */
.qualifier-card__badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 9999px;
background-color: #1A1A22;
border: 1px solid rgba(255, 255, 255, 0.06);
font-size: 10px;
font-weight: 600;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 24px;
align-self: flex-start;
user-select: none;
}
/* ELEMENTO: TÍTULO */
.qualifier-card__title {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 36px;
}
@media (min-width: 768px) {
.qualifier-card__title {
font-size: 40px;
}
}
/* ELEMENTO: LISTA DE BENEFICIOS */
.qualifier-card__list {
list-style: none;
display: flex;
flex-direction: column;
}
/* ELEMENTO: ÍTEM DE LA LISTA */
.qualifier-card__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1.5px solid rgba(255, 255, 255, 0.04);
gap: 16px;
}
.qualifier-card__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.qualifier-card__item-text {
font-size: 14px;
line-height: 1.5;
color: #E2E8F0;
font-weight: 500;
}
@media (min-width: 768px) {
.qualifier-card__item-text {
font-size: 15px;
}
}
/* ELEMENTO: CONTENEDOR CHECKBOX VERDE */
.qualifier-card__check {
width: 18px;
height: 18px;
border-radius: 4px;
background-color: #10B981;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.qualifier-card__check-icon {
width: 11px;
height: 11px;
color: #FFFFFF;
}
/* ==================================================== */
/* BLOQUE: FORMULARIO DE CAPTACIÓN (LEAD FORM CARD) */
/* ==================================================== */
.lead-form-card {
background-color: #0E0E11;
border: 1.5px solid rgba(255, 255, 255, 0.04);
border-radius: 28px;
padding: 32px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
transition: border-color 0.3s ease;
}
@media (min-width: 768px) {
.lead-form-card {
padding: 40px;
}
}
.lead-form-card:hover {
border-color: rgba(255, 255, 255, 0.08);
}
/* ELEMENTO: ICONO DE CABECERA */
.lead-form-card__icon-box {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
background-color: #141419;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: #FFFFFF;
}
.lead-form-card__icon {
width: 20px;
height: 20px;
}
/* ELEMENTO: TEXTOS DE CABECERA */
.lead-form-card__title {
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 8px;
}
@media (min-width: 768px) {
.lead-form-card__title {
font-size: 24px;
}
}
.lead-form-card__desc {
font-size: 13.5px;
line-height: 1.6;
color: #94A3B8;
margin-bottom: 32px;
}
/* ELEMENTO: FORMULARIO EN SÍ */
.lead-form {
display: flex;
flex-direction: column;
gap: 16px;
}
/* ELEMENTO: FILA DE ENTRADA (ROW) */
.lead-form__row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.lead-form__row {
grid-template-columns: 1fr 1fr;
}
}
.lead-form__group {
position: relative;
width: 100%;
}
/* ELEMENTO: INPUTS / CONTROLES */
.lead-form__input,
.lead-form__select,
.lead-form__textarea {
width: 100%;
background-color: #121216;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 14px 16px;
font-size: 13.5px;
color: #FFFFFF;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.lead-form__input::placeholder,
.lead-form__textarea::placeholder {
color: #475569;
}
.lead-form__input:focus,
.lead-form__select:focus,
.lead-form__textarea:focus {
border-color: #8B5CF6;
box-shadow: 0 0 0 1px #8B5CF6;
}
/* COMPONENTE SELECT PERSONALIZADO */
.lead-form__select-wrapper {
position: relative;
width: 100%;
}
.lead-form__select {
appearance: none;
cursor: pointer;
padding-right: 40px;
}
.lead-form__select-icon {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #64748B;
pointer-events: none;
}
.lead-form__textarea {
resize: none;
min-height: 100px;
}
/* ELEMENTO: PREFERENCIA DE CONTACTO */
.lead-form__pref-section {
padding: 8px 0;
}
.lead-form__pref-label {
font-size: 12px;
color: #64748B;
font-weight: 500;
display: block;
margin-bottom: 12px;
user-select: none;
}
.lead-form__pref-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lead-form__pref-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
background-color: rgba(18, 18, 22, 0.6);
font-size: 12px;
color: #94A3B8;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
user-select: none;
}
.lead-form__pref-btn:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.2);
}
.lead-form__pref-btn--active {
border-color: #8B5CF6;
background-color: rgba(139, 92, 246, 0.1);
color: #FFFFFF;
}
.lead-form__pref-icon {
width: 14px;
height: 14px;
}
/* ELEMENTO: CHECKBOX LEGAL */
.lead-form__legal-row {
display: flex;
align-items: start;
gap: 12px;
padding-top: 8px;
}
.lead-form__checkbox {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: #121216;
accent-color: #8B5CF6;
cursor: pointer;
margin-top: 2px;
}
.lead-form__legal-label {
font-size: 10px;
line-height: 1.5;
color: #64748B;
cursor: pointer;
user-select: none;
}
@media (min-width: 768px) {
.lead-form__legal-label {
font-size: 11px;
}
}
/* ELEMENTO: BOTÓN DE ENVÍO */
.lead-form__submit {
width: 100%;
background-color: #8B5CF6;
color: #FFFFFF;
font-weight: 600;
font-size: 13px;
padding: 16px;
border: none;
border-radius: 9999px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
letter-spacing: 0.02em;
margin-top: 16px;
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.1);
}
@media (min-width: 768px) {
.lead-form__submit {
font-size: 14px;
}
}
.lead-form__submit:hover {
background-color: #7C3AED;
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.2);
}
.lead-form__submit:active {
transform: scale(0.99);
}
/* ELEMENTO: REDES SOCIALES INTERNAS */
.lead-form__socials {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 24px;
padding-top: 20px;
border-top: 1.5px solid rgba(255, 255, 255, 0.04);
}
.lead-form__social-link {
color: #64748B;
transition: color 0.2s ease;
display: inline-flex;
}
.lead-form__social-link:hover {
color: #FFFFFF;
}
.lead-form__social-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
/* ==================================================== */
/* BLOQUE: NOTIFICACIÓN FLOTANTE (TOAST) */
/* ==================================================== */
.toast-notif {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
background-color: #0E0E11;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
max-width: 380px;
width: calc(100% - 48px);
transform: translateY(80px);
opacity: 0;
pointer-events: none;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
display: flex;
gap: 12px;
}
.toast-notif--visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.toast-notif__icon-box {
width: 40px;
height: 40px;
border-radius: 9999px;
background-color: rgba(16, 185, 129, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #10B981;
}
.toast-notif__icon {
width: 20px;
height: 20px;
}
.toast-notif__body {
display: flex;
flex-direction: column;
gap: 4px;
}
.toast-notif__title {
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
}
.toast-notif__text {
font-size: 12px;
color: #94A3B8;
line-height: 1.5;
}
/* RESETEADOR INTERNO DEL COMPONENTE */
.octopus-landing-preview * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* FONDO OSCURO DEL PREVIEW (Simulación del Canvas) */
.octopus-landing-preview {
background-color: #050506;
background-image: radial-gradient(circle at 50% 20%, #16122d 0%, #050506 70%);
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 40px;
position: relative;
}
/* ==================================================== */
/* BLOQUE: CABECERA FLOTANTE AISLADA (OCT-GLASS-HEADER) */
/* ==================================================== */
.oct-glass-header {
position: absolute;
top: 40px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
padding: 0 24px;
box-sizing: border-box;
z-index: 1000;
}
/* ELEMENTO: CONTENEDOR DE LA CÁPSULA (OCT-GLASS-HEADER CAPSULE) */
.oct-glass-header__container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px 10px 32px;
border-radius: 9999px;
background-color: rgba(10, 10, 12, 0.48);
backdrop-filter: blur(36px) saturate(220%);
-webkit-backdrop-filter: blur(36px) saturate(220%);
border: 1px solid rgba(255, 255, 255, 0.12);
width: 100%;
max-width: 1020px;
box-sizing: border-box;
/* Biselado tridimensional e iluminación interna de cristal */
box-shadow:
inset 0 1.5px 0px 0px rgba(255, 255, 255, 0.32),
inset 0 -1.5px 3px 0px rgba(0, 0, 0, 0.6),
0 25px 60px -15px rgba(0, 0, 0, 0.95);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ELEMENTO: LOGOTIPO */
.oct-glass-header__logo {
display: flex;
align-items: center;
gap: 4px;
text-decoration: none;
user-select: none;
}
.oct-glass-header__logo-text {
font-weight: 700;
font-size: 17px;
letter-spacing: 0.35em;
color: #FFFFFF;
}
.oct-glass-header__logo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: -1px;
}
/* ELEMENTO: MENÚ DE ENLACES (NAV) */
.oct-glass-header__nav {
display: none; /* Ocultar en dispositivos móviles */
}
@media (min-width: 768px) {
.oct-glass-header__nav {
display: flex;
align-items: center;
}
}
.oct-glass-header__menu {
display: flex;
align-items: center;
list-style: none;
gap: 40px;
}
.oct-glass-header__link {
color: #E4E4E7;
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
transition: color 0.25s ease;
}
.oct-glass-header__link:hover {
color: #FFFFFF;
}
/* ELEMENTO: ACCIONES (PAÍS + BOTÓN CONTACTAR) */
.oct-glass-header__actions {
display: flex;
align-items: center;
gap: 16px;
}
/* ELEMENTO: SELECTOR DE PAÍS (COUNTRY PILL) */
.oct-glass-header__country {
background-color: rgba(24, 24, 27, 0.75);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 9999px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 10px;
color: #E4E4E7;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
.oct-glass-header__country:hover {
background-color: rgba(39, 39, 42, 0.9);
border-color: rgba(255, 255, 255, 0.15);
color: #FFFFFF;
}
.oct-glass-header__flag {
font-size: 14px;
}
.oct-glass-header__code {
letter-spacing: 0.02em;
}
.oct-glass-header__chevron {
color: #71717A;
transition: color 0.2s;
}
.oct-glass-header__country:hover .oct-glass-header__chevron {
color: #FFFFFF;
}
/* ELEMENTO: BOTÓN DE CONTACTO PREMIUM (SÓLIDO) */
.oct-glass-header__btn {
background-color: #A46BFD;
color: #FFFFFF;
border-radius: 9999px;
padding: 10px 24px;
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.25s ease;
box-shadow: 0 4px 15px rgba(164, 107, 253, 0.3);
border: none;
cursor: pointer;
}
.oct-glass-header__btn:hover {
background-color: #B584FF;
box-shadow: 0 6px 20px rgba(164, 107, 253, 0.5);
transform: translateY(-1px);
}
.oct-glass-header__btn:active {
transform: translateY(1px);
}
/* Contenedor principal de la sección */
.oct-hist-wrapper {
width: 100%;
position: relative;
z-index: 10;
padding: 60px 0;
box-sizing: border-box;
}
/* Rejilla de 3 columnas (Desktop) */
.oct-hist-grid {
display: grid;
grid-template-columns: 3fr 6fr 3fr; /* Proporciones de Figma: laterales delgadas, centro ancho */
gap: 40px;
align-items: center;
max-width: 1240px;
margin: 0 auto;
width: 100%;
}
/* Columnas laterales de imágenes */
.oct-hist-side-col {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
gap: 80px; /* Separación vertical entre tarjetas */
}
/* Estilo de las Tarjetas de Imágenes con efecto Tilt (Figma) */
.oct-hist-card {
background: #0E0E11; /* Fondo oscuro idéntico a tu captura */
padding: 6px; /* Simula el bisel o borde blanco de Figma */
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil reflectante */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); /* Sombra tridimensional */
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
width: 100%;
box-sizing: border-box;
}
/* Efecto interactivo sutil en hover */
.oct-hist-card:hover {
transform: rotate(0deg) scale(1.05) !important; /* Quita la rotación y agranda sutilmente */
border-color: rgba(255, 255, 255, 0.2);
}
.oct-hist-card img {
width: 100%;
height: 150px; /* Altura simétrica para las imágenes */
object-fit: cover; /* Evita distorsiones de la imagen */
border-radius: 11px;
display: block;
opacity: 0.9;
}
/* Rotaciones e inclinaciones exactas de tu captura de pantalla */
.oct-hist-tilt-left-top {
transform: rotate(-8deg);
align-self: flex-start;
width: 95%;
}
.oct-hist-tilt-left-bottom {
transform: rotate(-5deg);
align-self: flex-end;
width: 90%;
}
.oct-hist-tilt-right-top {
transform: rotate(6deg);
align-self: flex-end;
width: 85%;
}
.oct-hist-tilt-right-middle {
transform: rotate(8deg);
width: 95%;
}
.oct-hist-tilt-right-bottom {
transform: rotate(-4deg);
align-self: flex-end;
width: 80%;
}
/* Columna Central de Contenido de Texto */
.oct-hist-center-col {
display: flex;
flex-direction: column;
gap: 32px; /* Separación generosa entre párrafos de Figma */
text-align: left;
}
.oct-hist-center-col p {
color: #d4d4d8; /* Gris suave para descanso de lectura */
font-size: 15.5px;
line-height: 1.7; /* Altura de línea recomendada */
font-weight: 400;
margin: 0;
}
/* Destacados en Negrita de la captura */
.oct-hist-center-col strong {
color: #ffffff; /* Contraste blanco fuerte */
font-weight: 700;
}
/* Mosaico responsivo exclusivo para teléfonos móviles */
.oct-hist-mobile-mosaic {
display: none;
}
/* =========================================================================
3. RESPONSIVE DESIGN (Pantallas de Celulares y Tablets)
========================================================================= */
@media (max-width: 1024px) {
/* Convierte la grilla de 3 columnas a 1 sola columna vertical */
.oct-hist-grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 16px;
}
/* Oculta las columnas laterales de imágenes inclinadas para evitar overflow */
.oct-hist-side-col {
display: none;
}
/* Activa el mosaico ordenado al final del texto en móviles */
.oct-hist-mobile-mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 24px;
}
.oct-hist-mobile-card {
background: #0E0E11;
padding: 4px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-sizing: border-box;
}
.oct-hist-mobile-card img {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* Rotaciones muy sutiles para móvil sin salirse de la pantalla */
.oct-hist-mobile-tilt-1 {
transform: rotate(-3deg);
}
.oct-hist-mobile-tilt-2 {
transform: rotate(3deg);
}
}
/* Contenedor envolvente de la sección para evitar colisiones */
.oct-ident-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 60px 24px;
box-sizing: border-box;
}
/* Tarjeta contenedora oscura principal */
.oct-ident-card {
background-color: #0E0E11; /* Fondo ultra oscuro del Figma */
border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil reflectante */
border-radius: 32px; /* Esquinas redondeadas premium */
padding: 80px 40px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
text-align: center;
position: relative;
overflow: hidden;
}
/* Halo de luz sutil en el fondo de la tarjeta */
.oct-ident-card::before {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(164, 107, 253, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
}
/* Badge superior / Píldora "Nuestra identidad" */
.oct-ident-badge {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 6px 16px;
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
color: #a1a1aa; /* Gris zinc */
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 24px;
display: inline-block;
user-select: none;
z-index: 2;
}
/* Título principal con tipografía mixta de Figma */
.oct-ident-headline {
color: #ffffff;
font-size: 38px;
line-height: 1.25;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 0 64px 0;
max-width: 900px;
z-index: 2;
}
@media (min-width: 768px) {
.oct-ident-headline {
font-size: 48px;
}
}
/* Tipografía cursiva elegante de Figma */
.oct-ident-headline-serif {
font-style: italic;
font-weight: 400;
color: #ffffff;
}
/* Rejilla de 3 columnas para los pilares */
.oct-ident-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
width: 100%;
z-index: 2;
}
@media (min-width: 1024px) {
.oct-ident-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
/* Columnas de pilares individuales */
.oct-ident-col {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 12px;
box-sizing: border-box;
}
/* Contenedor de iconos */
.oct-ident-icon-wrapper {
color: #ffffff;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.oct-ident-col:hover .oct-ident-icon-wrapper {
transform: translateY(-4px); /* Sutil feedback dinámico */
}
/* Estilo de los SVGs de los iconos */
.oct-ident-icon-svg {
width: 56px;
height: 56px;
stroke-width: 1.5;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Títulos de pilares */
.oct-ident-col-title {
color: #ffffff;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 16px 0;
}
/* Textos de descripción */
.oct-ident-col-desc {
color: #85858a; /* Gris neutro del Figma */
font-size: 13.5px;
line-height: 1.6;
margin: 0;
font-weight: 400;
max-width: 320px;
}
.filtro-seccion {
background-color: transparent; /* Se adapta al fondo negro de tu web */
color: #ffffff;
max-width: 500px;
}
.botones-filtro {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 25px;
}
.btn-filtro {
background: transparent;
color: #ffffff;
border: 1px solid #444;
padding: 8px 18px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
/* Estado Activo (Morado como en tu diseño) */
.btn-filtro.active {
background-color: #8b5cf6;
border-color: #8b5cf6;
color: white;
}
.bloques-info {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Estilo de las etiquetas (Azul/Verde azulado de la imagen) */
.item-info {
background-color: #146c78;
color: #ffffff;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
}
/* Clase para ocultar elementos con una transición suave */
.item-info.hide {
display: none;
opacity: 0;
}
/* =========================================================================
ESTILOS DEL TÍTULO MIXTO (Encapsulado para Bricks Builder)
========================================================================= */
.oct-title-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
/* Título principal con la fuente condensed del Figma */
.oct-title-heading {
color: #ffffff;
/* Aplica tu tipografía principal. Si no se ha cargado en el sistema, cae a sans-serif condensado */
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
/* Escalado de fuente fluido y responsivo */
font-size: clamp(38px, 6vw, 68px);
}
/* Span para la palabra con tipografía Serif Italic elegante */
.oct-title-heading .serif-italic {
/* Familia exacta extraída de tu captura de pantalla de WordPress */
font-style: italic;
font-weight: 400;
letter-spacing: 0.02em;
/* Pequeño ajuste visual para balancear el peso con la tipografía condensed */
display: inline-block;
transform: translateY(1px);
}
/* Contenedor principal: flexible, responsivo y centrado */
.paises-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
align-items: center;
padding: 24px;
background: transparent; /* Totalmente transparente */
width: 100%;
box-sizing: border-box;
}
/* Estilos de la cápsula individual */
.pais-capsula {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.12); /* Fondo blanco traslúcido original */
border: 1px solid rgba(180, 140, 255, 0.25); /* Borde fino violeta brillante */
border-radius: 9999px; /* Forma de cápsula perfecta */
padding: 12px 28px;
cursor: pointer;
outline: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
backdrop-filter: blur(4px); /* Efecto de cristal translúcido esmerilado */
-webkit-backdrop-filter: blur(4px);
box-sizing: border-box;
}
/* Bandera (Emoji) */
.pais-bandera {
font-size: 20px;
margin-right: 12px;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
/* Texto del país */
.pais-nombre {
color: rgba(255, 255, 255, 0.9); /* Color blanco brillante original */
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.2px;
}
/* --- EFECTOS INTERACTIVOS (HOVER & FOCUS) --- */
/* Efecto al pasar el cursor */
.pais-capsula:hover {
background: rgba(255, 255, 255, 0.2); /* Se vuelve más sólido */
border-color: rgba(180, 140, 255, 0.55); /* El borde se ilumina */
box-shadow: 0 0 16px rgba(180, 140, 255, 0.3); /* Resplandor suave neón */
transform: translateY(-2px); /* Micro-interacción premium de elevación */
}
/* Al hacer clic (active) */
.pais-capsula:active {
transform: translateY(0) scale(0.97); /* Pequeña respuesta física al presionar */
background: rgba(255, 255, 255, 0.25);
}
/* Accesibilidad con teclado */
.pais-capsula:focus-visible {
border-color: #ffffff;
box-shadow: 0 0 0 3px rgba(180, 140, 255, 0.5);
}
/* ESTILOS CSS INDEPENDIENTES */
@keyframes marquee-scroll-left {
0% { transform: translateX(0); } 100% { transform: translateX(-50%); }
}
.logos-section-container {
padding: 5px 0;
overflow: hidden;
}
.ticker-track {
display: flex;
gap: 16px;
animation: marquee-scroll-left 40s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.logo-box {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
width: 176px;
}
.logo-box img {
max-height: 100%;
max-width: 100%;
transition: all 0.3s ease;
}
.logo-box img:hover {
transform: scale(1.05);
}
/* 1. Forzar diseño en columna: Título arriba, botones abajo */
.fluent_form_1 .ff_list_3col {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
float: none !important;
}
/* 2. Resetear el espacio del título y mandarlo arriba */
.fluent_form_1 .ff_list_3col .ff-el-input--label {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin-bottom: 10px !important;
padding: 0 !important;
}
/* 3. Contenedor de botones al 100% del ancho de la tarjeta */
.fluent_form_1 .ff_list_3col .ff-el-input--content {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
}
/* 4. Distribución milimétrica de las 3 cajas por igual */
.fluent_form_1 .ff_list_3col .ff-el-form-check {
flex: 1 !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* 5. Ajuste estético y tipográfico de los botones */
.fluent_form_1 .ff_list_3col .ff-el-form-check-label {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #121216 !important;
color: #94A3B8 !important;
border: 1px solid #202028 !important;
padding: 12px 4px !important; /* Padding interno reducido para asegurar espacio del texto */
border-radius: 12px !important;
cursor: pointer !important;
width: 100% !important;
margin: 0 !important;
font-size: 13px !important; /* Texto sutilmente más pequeño para prevenir desbordes internos */
text-align: center !important;
}
/* 6. Input invisible pero funcional encima de toda la caja */
.fluent_form_1 .ff_list_3col .ff-el-form-check-input {
position: absolute !important;
top: 0 !important;
left: 0 !important;
opacity: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
z-index: 2 !important;
cursor: pointer !important;
}
/* 7. Hover y Estado Seleccionado Corporativo (Morado Octopus) */
.fluent_form_1 .ff_list_3col .ff-el-form-check-label:hover {
border-color: #475569 !important;
color: #ffffff !important;
}
.fluent_form_1 .ff_list_3col .ff-el-form-check-label:has(.ff-el-form-check-input:checked) {
background-color: rgba(164, 107, 253, 0.1) !important;
border-color: #A46BFD !important;
color: #ffffff !important;
box-shadow: 0 0 12px rgba(164, 107, 253, 0.2) !important;
}
/* Centrar el último elemento de la cuadrícula en pantallas de escritorio y tablets */
@media (min-width: 768px) {
#brxe-yymocb > .bg--services__cards:last-of-type {
grid-column: span 2;
justify-self: center;
width: 100%;
max-width: 540px; /* Esto evita que se estire y mantiene el mismo ancho que las demás */
}
}
/* =========================================================================
ICONO 1: MONTAÑA / NAVE — ARRIBA IZQUIERDA
========================================================================= */
@keyframes float-badge-1 {
0%, 100% {
transform: translateY(0) translateX(0) rotate(0deg);
}
50% {
transform: translateY(-10px) translateX(4px) rotate(-1.5deg);
}
}
.float-1 {
animation: float-badge-1 6s ease-in-out infinite;
}
/* =========================================================================
ICONO 2: MONDAY.COM — ABAJO IZQUIERDA
========================================================================= */
@keyframes float-badge-2 {
0%, 100% {
transform: translateY(0) scale(1) rotate(0deg);
}
33% {
transform: translateY(-8px) scale(1.02) rotate(1deg);
}
66% {
transform: translateY(2px) scale(0.98) rotate(-1deg);
}
}
.float-2 {
animation: float-badge-2 5.5s ease-in-out infinite;
}
/* =========================================================================
ICONO 3: TIENDA / MENSAJERÍA — ARRIBA DERECHA
========================================================================= */
@keyframes float-badge-3 {
0%, 100% {
transform: translateY(0) translateX(0) rotate(0deg);
}
50% {
transform: translateY(-12px) translateX(-4px) rotate(2deg);
}
}
.float-3 {
animation: float-badge-3 6.5s ease-in-out infinite;
}
/* =========================================================================
ICONO 4: ODOO — ABAJO DERECHA
========================================================================= */
@keyframes float-badge-4 {
0%, 100% {
transform: translateY(0) scale(1) rotate(0deg);
filter: drop-shadow(
0 10px 15px rgba(113, 75, 103, 0.3)
);
}
50% {
transform: translateY(-6px) scale(1.03) rotate(-1deg);
filter: drop-shadow(
0 15px 30px rgba(113, 75, 103, 0.6)
);
}
}
.float-4 {
animation: float-badge-4 7s ease-in-out infinite;
}
/* =========================================================================
MOVIMIENTO SUAVE DEL CONTENEDOR DE OCTOPUS
========================================================================= */
@keyframes float-container {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
/* =========================================================================
ANIMACIÓN DEL TICKER DE LOGOTIPOS
========================================================================= */
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.ticker-track {
display: flex;
width: max-content;
animation: marquee 35s linear infinite;
}
.ticker-track:hover {
animation-play-state: paused;
}
/* =========================================================================
LÍNEAS DE CONEXIÓN SVG
========================================================================= */
.connection-line {
stroke: rgba(251, 250, 252, 0.12);
stroke-dasharray: 4, 4;
transition: all 0.4s ease;
}
/* Línea activa */
.connection-line.active {
stroke: #A46BFD;
stroke-width: 2px;
stroke-dasharray: none;
filter: drop-shadow(
0 0 4px rgba(164, 107, 253, 0.6)
);
}
/* =========================================================================
PUNTAS DE LAS FLECHAS SVG
========================================================================= */
.arrow-head {
fill: rgba(251, 250, 252, 0.3);
transition: all 0.4s ease;
}
.arrow-head.active {
fill: #A46BFD;
}
/* Contenedor principal con fondo negro */
.carousel-container {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
background-color: #000000 !important;
padding: 2.5rem 0 !important;
overflow: hidden !important;
display: block !important;
box-sizing: border-box !important;
}
/* Riel que limita la vista y añade las sombras de desvanecimiento */
.carousel-track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
width: max-content !important;
}
/* Sombreado elegante difuminado en extremos izquierdo y derecho */
.mask-gradient {
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
}
/* Bloque de logos individuales alineados */
.carousel-block {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
flex-shrink: 0 !important;
gap: 5.5rem !important;
padding-right: 5.5rem !important; /* Mismo valor que el gap para mantener simetría decimal */
width: max-content !important;
position: relative !important;
float: none !important;
/* Animación fluida acelerada por hardware de GPU */
animation: scroll-left 25s linear infinite !important;
}
/* Logos individuales con inmunidad absoluta contra colapso de WordPress */
.carousel-logo {
height: 45px !important;
width: auto !important;
max-width: none !important; /* Bloquea el "max-width: 100%" de Bricks/WordPress */
flex-shrink: 0 !important; /* Impide que las imágenes se aplasten horizontalmente */
object-fit: contain !important;
user-select: none !important;
transition: all 0.3s ease !important;
margin: 0 !important;
padding: 0 !important;
filter: brightness(0) invert(1) !important;
}
/* Pausa en hover */
.carousel-container.hover-pause:hover .carousel-block {
animation-play-state: paused !important;
}
/* Hover de logo individual */
.carousel-logo:hover {
transform: scale(1.08) !important;
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Keyframes de traslación del -50% */
@keyframes scroll-left {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes scroll-right {
0% { transform: translate3d(-50%, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}
/* =========================================================================
CONTENEDOR DE AUTORIDAD (COLUMNA IZQUIERDA FIGMA CLONE)
========================================================================= */
.odoo-authority {
max-width: 560px;
display: flex;
flex-direction: column;
gap: 32px; /* Separación armónica entre bloques */
box-sizing: border-box;
}
/* 1. INSIGNIA / BADGE SILVER PARTNER */
.odoo-authority__badge {
display: inline-flex;
align-items: center;
gap: 14px;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 10px 18px;
align-self: flex-start; /* Impide que se estire al 100% */
user-select: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.odoo-authority__badge-icon {
font-size: 20px;
line-height: 1;
}
.odoo-authority__badge-content {
display: flex;
flex-direction: column;
gap: 1px;
}
.odoo-authority__badge-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #FFFFFF;
}
.odoo-authority__badge-subtitle {
color: #71717A; /* Gris zinc suave de tu captura */
font-size: 11px;
font-weight: 400;
}
/* 2. TITULARES (HEADING MIXTO) */
.odoo-authority__heading {
font-size: clamp(34px, 5vw, 48px); /* Fluid typography responsiva */
font-weight: 600;
line-height: 1.15;
color: #FFFFFF;
letter-spacing: -0.02em;
margin: 0;
}
.odoo-authority__heading-italic {
display: block; /* Empuja a la línea inferior exacta */
font-style: italic;
font-weight: 400;
color: #94A3B8; /* Color gris plata premium atenuado */
margin-top: 8px;
letter-spacing: -0.01em;
}
/* 3. PÁRRAFO INFORMATIVO */
.odoo-authority__description {
font-size: 15px;
line-height: 1.6;
color: #94A3B8; /* Mismo tono de descanso visual */
font-weight: 400;
margin: 0;
}
/* 4. SEPARADOR HORIZONTAL SUTIL */
.odoo-authority__divider {
border: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
margin: 4px 0 !important;
width: 100%;
}
/* 5. LISTADO DE ICONOS DE CONFIANZA */
.odoo-authority__list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 18px; /* Separación uniforme entre ventajas */
}
.odoo-authority__item {
display: flex;
align-items: center;
gap: 14px;
margin: 0 !important;
padding: 0 !important;
}
/* El círculo verde esmeralda con borde nativo */
.odoo-authority__check {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid #10B981; /* Verde esmeralda CRO */
color: #10B981;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* Evita que el círculo se deforme si el texto es muy largo */
box-sizing: border-box;
}
/* Ajuste del vector interno del check */
.odoo-authority__check svg {
width: 11px;
height: 11px;
display: block;
}
/* Texto de la ventaja */
.odoo-authority__text {
font-size: 14.5px;
font-weight: 400;
color: #E2E8F0; /* Blanco suave roto para alta lectura */
line-height: 1.4;
}
/* =========================================================================
6. CALENDARIO FLOTANTE (ESTILO OSCURO CORPORATIVO PARA EL DATEPICKER)
========================================================================= */
body .flatpickr-calendar {
background: #FFFFFF !important;
border-radius: 16px !important;
border: 1px solid #E2E8F0 !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3) !important;
padding: 8px !important;
}
body .flatpickr-months .flatpickr-month,
body .flatpickr-current-month .flatpickr-monthDropdown-months {
color: #0F172A !important;
font-weight: 700 !important;
}
body .flatpickr-calendar .flatpickr-weekday {
color: #94A3B8 !important;
font-weight: 600 !important;
}
body .flatpickr-day {
color: #334155 !important;
border-radius: 50% !important;
}
body .flatpickr-day:hover {
background-color: #F1F5F9 !important;
color: #0F172A !important;
}
body .flatpickr-day.today {
border-color: #8B5CF6 !important;
color: #8B5CF6 !important;
font-weight: 700 !important;
}
body .flatpickr-day.selected,
body .flatpickr-day.selected:hover {
background: #0F172A !important; /* Anillo sólido oscuro para selección clara */
border-color: #0F172A !important;
color: #FFFFFF !important;
font-weight: 700 !important;
}
/* Espacio de nombres único (.oct-cert-) para evitar conflictos globales en Bricks */
.oct-cert-section-wrapper, .oct-cert-section-wrapper * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.oct-cert-section-wrapper {
background-color: #050506;
color: #ffffff;
font-size: 16px;
line-height: 1.5;
padding: 80px 0;
width: 100%;
}
.oct-cert-container {
max-width: 1140px;
margin: 0 auto;
width: 100%;
padding: 0 20px;
}
.oct-cert-section-header {
text-align: center;
margin-bottom: 60px;
}
.oct-cert-section-badge {
border: 1px solid rgba(164, 107, 253, 0.3);
color: #A46BFD;
padding: 6px 16px;
border-radius: 9999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
background-color: rgba(164, 107, 253, 0.1);
display: inline-block;
text-transform: uppercase;
}
.oct-cert-section-title {
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 700;
margin-top: 16px;
margin-bottom: 16px;
color: #ffffff;
}
.oct-cert-section-title em {
font-style: italic;
font-weight: 400;
color: #A46BFD;
}
.oct-cert-section-desc {
color: #94A3B8;
font-size: 14px;
max-width: 540px;
margin: 0 auto;
line-height: 1.6;
}
/* Distribución de rejilla fluida de 2 columnas */
.oct-cert-layout-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
width: 100%;
}
@media (min-width: 1024px) {
.oct-cert-layout-grid {
grid-template-columns: 8fr 4fr;
}
}
/* --- TARJETA DE PAPEL DEL CERTIFICADO (Doble Bisel Fino) --- */
.oct-cert-paper-card {
background-color: #fafaff;
color: #1a1a24;
border-radius: 20px;
padding: clamp(24px, 5vw, 48px);
border: 12px solid #ffffff;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 20px 50px rgba(0, 0, 0, 0.9);
position: relative;
box-sizing: border-box;
}
.oct-cert-inner-border-1 {
position: absolute;
top: 8px; left: 8px; right: 8px; bottom: 8px;
border: 2px solid rgba(26, 26, 36, 0.1);
border-radius: 14px;
pointer-events: none;
}
.oct-cert-inner-border-2 {
position: absolute;
top: 16px; left: 16px; right: 16px; bottom: 16px;
border: 1px solid rgba(26, 26, 36, 0.05);
border-radius: 10px;
pointer-events: none;
}
.oct-cert-paper-content {
position: relative;
z-index: 10;
text-align: center;
}
/* Guilloché / Textura sutil de seguridad corporativa */
.certificate-watermark {
background-image: radial-gradient(circle, rgba(113, 75, 103, 0.04) 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
/* Logo Odoo Superior */
.oct-cert-logo-odoo {
font-size: clamp(3rem, 6vw, 4.5rem);
font-weight: 800;
color: #714B67;
letter-spacing: -0.05em;
user-select: none;
line-height: 1;
display: block;
}
/* Medalla Superior */
.oct-cert-medalla-wrap {
display: flex;
justify-content: center;
margin: 20px 0;
}
.oct-cert-medalla-img {
height: 72px;
width: auto;
object-fit: contain;
display: block;
}
.oct-cert-subtitle-gold {
font-style: italic;
font-weight: 500;
color: #714B67;
font-size: 16px;
margin-bottom: 8px;
}
.oct-cert-title-header {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: #9ca3af;
text-transform: uppercase;
margin-bottom: 32px;
}
/* Estructura del Logotipo Octopus Innovations */
.oct-cert-brand-block {
display: flex;
flex-direction: column;
align-items: center;
margin: 28px 0;
}
.oct-cert-brand-flex {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.oct-cert-brand-text {
font-size: clamp(28px, 4vw, 44px);
font-weight: 900;
letter-spacing: -0.02em;
color: #1a1a24;
line-height: 1;
}
.oct-cert-brand-pulpo {
height: clamp(36px, 5vw, 52px);
width: auto;
object-fit: contain;
display: block;
}
.oct-cert-brand-sub {
font-size: clamp(9px, 1.5vw, 11px);
font-weight: 700;
letter-spacing: 0.4em;
color: rgba(113, 75, 103, 0.7);
text-transform: uppercase;
margin-top: 4px;
display: block;
}
.oct-cert-divider {
width: 100%;
max-width: 440px;
height: 1.5px;
background-color: rgba(113, 75, 103, 0.2);
margin: 24px auto;
}
.oct-cert-status-text {
font-size: clamp(13px, 2vw, 15px);
color: #374151;
margin-bottom: 24px;
}
.oct-cert-status-text strong {
font-weight: 800;
color: #111827;
}
.oct-cert-body-paragraphs {
font-size: clamp(11.5px, 1.8vw, 13px);
color: #4b5563;
max-width: 500px;
margin: 0 auto 28px auto;
line-height: 1.6;
font-weight: 400;
}
.oct-cert-validity-text {
font-size: clamp(11px, 1.8vw, 12px);
color: #6b7280;
margin-bottom: 40px;
}
.oct-cert-validity-text strong {
color: #111827;
}
/* Estructura de Firmas y Sello Central (3 Columnas) */
.oct-cert-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top: 32px;
margin-top: 32px;
width: 100%;
}
@media (min-width: 640px) {
.oct-cert-footer-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
.oct-cert-sig-col {
display: flex;
flex-direction: column;
align-items: center;
}
.oct-cert-sig-box {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.oct-cert-sig-box img {
height: 100%;
width: auto;
object-fit: contain;
display: block;
}
.oct-cert-sig-line {
width: 100px;
height: 1px;
background-color: #d1d5db;
margin: 6px 0;
}
.oct-cert-sig-name {
font-size: 9.5px;
font-weight: 700;
color: #1f2937;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.oct-cert-sig-charge {
font-size: 8px;
color: #6b7280;
line-height: 1.3;
margin-top: 2px;
}
/* Sello de Medalla Central */
.oct-cert-seal-img {
height: 80px;
width: auto;
object-fit: contain;
display: block;
}
.oct-cert-seal-label {
font-size: 8px;
font-weight: 800;
color: #9ca3af;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 4px;
display: block;
}
/* --- BARRA LATERAL --- */
.oct-cert-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.oct-cert-side-card {
background-color: #0E0E11;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 24px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
}
.oct-cert-side-card-title {
font-size: 14px;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.oct-cert-meta-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: 12px;
}
.oct-cert-meta-row:last-child {
border-bottom: none;
}
.oct-cert-meta-label {
color: #94A3B8;
}
.oct-cert-meta-value {
color: #ffffff;
font-weight: 600;
}
.oct-cert-pulse-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
color: #10B981;
font-weight: 700;
}
.oct-cert-pulse-dot {
width: 6px;
height: 6px;
background-color: #10B981;
border-radius: 50%;
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% { transform: scale(0.95); opacity: 0.5; }
50% { transform: scale(1.15); opacity: 1; }
100% { transform: scale(0.95); opacity: 0.5; }
}
/* Botón Primario */
.oct-cert-btn-primary {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #8B5CF6;
color: #ffffff;
font-size: 12.5px;
font-weight: 700;
padding: 14px 20px;
border-radius: 12px;
text-decoration: none;
transition: all 0.25s ease;
border: none;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
.oct-cert-btn-primary:hover {
background-color: #7C3AED;
transform: translateY(-1px);
}
/* Widget de Verificación en Vivo */
.oct-cert-search-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #ffffff;
margin-bottom: 4px;
display: block;
}
.oct-cert-search-p {
font-size: 11px;
color: #94A3B8;
margin-bottom: 12px;
}
.oct-cert-search-box {
display: flex;
gap: 8px;
margin-bottom: 12px;
width: 100%;
}
.oct-cert-search-input {
flex: 1;
background-color: #121213;
border: 1px solid rgba(255, 255, 255, 0.05);
color: #ffffff;
border-radius: 10px;
padding: 10px 14px;
font-size: 12px;
outline: none;
box-sizing: border-box;
text-transform: uppercase;
width: 100%;
}
.oct-cert-search-input:focus {
border-color: rgba(139, 92, 246, 0.5);
}
.oct-cert-search-btn {
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff;
border: none;
border-radius: 10px;
padding: 0 16px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s;
}
.oct-cert-search-btn:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.oct-cert-status-box {
font-size: 10.5px;
font-weight: 600;
}
/* from nosotros.html #bricks-frontend-inline-inline-css */
html {scroll-behavior: smooth}:root {--min-viewport: 360;--max-viewport: 1600;--base-font: 10;--clamp-unit: 1vw;} body {color: var(--white)} h1, h2, h3, h4, h5, h6 {color: var(--white)} html {background-color: var(--black)} body {background: none}.gradiant--black__hero.brxe-section {position: relative; justify-content: center}:where(.gradiant--black__hero.brxe-section > *:not(figcaption)) {position: relative}.gradiant--black__hero.brxe-section::before {background-image: linear-gradient(rgba(0, 0, 0, 0), var(--black)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 478px) {.gradiant--black__hero.brxe-section {padding-bottom: 26px}}.btn.brxe-text-basic {align-self: center}@media (max-width: 478px) {.btn.brxe-text-basic {font-size: calc(var(text--s)*.7)}}.btn.brxe-div {align-self: center !important}@media (max-width: 478px) {.btn.brxe-div {font-size: calc(var(text--s)*.7)}}.gap--modulo.brxe-div {row-gap: 6px}.color-text_grey.brxe-text-basic {color: #999999}.fit--content.brxe-div {width: fit-content; row-gap: 10px; column-gap: 7px}.bg--oscuro__oc.brxe-div {background-color: hsl(0, 0%, 9%)}.bg--oscuro__oc.brxe-section {background-color: hsl(0, 0%, 9%)}.absolute.brxe-image {position: absolute}.fluent--style__oc.brxe-xfluentform .fluentform .ff-btn-submit {background-color: var(--action); border-radius: 100px; color: #ffffff; width: 100%}.fluent--style__oc.brxe-xfluentform .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {background-color: var(--action)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group select {background-color: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 99%, 0.12); color: rgba(255, 255, 255, 0.58)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.32)}.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.32)}.fluent--style__oc.brxe-xfluentform {width: 100%}.fluent--style__oc.brxe-xfluentform .fluentform .ff_submit_btn_wrapper {text-align: center}:root {--bricks-color-acss_import_transparent: transparent;}:root[data-brx-theme="dark"] {--bricks-color-acss_import_transparent: transparent;}#brxe-xauazf .bricks-site-logo {width: 56%}@layer bricks {@media (max-width: 767px) {#brxe-sguayd .bricks-nav-menu-wrapper { display: none; }#brxe-sguayd .bricks-mobile-menu-toggle { display: block; }}}#brxe-sguayd .bricks-nav-menu {gap: 22px}#brxe-sguayd .bricks-nav-menu > li {margin-left: 0}#brxe-sguayd .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-sguayd .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-sguayd {display: none}}@media (max-width: 478px) {#brxe-hunuon {display: none}}#brxe-hcsajr:hover {color: var(--white)}@media (max-width: 767px) {#brxe-hcsajr {display: none}}#brxe-kguvku {display: none}@media (max-width: 991px) {#brxe-kguvku {display: flex}#brxe-kguvku .x-hamburger-box {--x-burger-size: 1; --x-burger-line-height: 1px; --x-burger-line-radius: 1px}}#brxe-brxzme {width: 8%; margin-bottom: 30px}#brxe-qlomfg {font-weight: 500}#brxe-lhdflk {font-family: "Instrument Serif"}#brxe-zxrvfa {row-gap: 6px}#brxe-jdyphf {background-image: url("/assets/img/uploads/Frame-21-1.png"); background-size: cover; background-position: center center; padding-top: 135px}#brxe-guhyga {font-size: calc(var(--text-xxl)*1.5)}#brxe-cpfogl {font-family: "MuseoSans"}#brxe-rfvfnb {padding-top: 80px}#brxe-ogwfln {width: 100% s}#brxe-zkyrwh {margin-bottom: 46px}#brxe-hfkljn {width: 26px}#brxe-jkufea {padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}#brxe-rclyjz {width: 26px}#brxe-hvmxjr {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}#brxe-gwahzj {width: 26px}#brxe-urlbae {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}@media (max-width: 478px) {#brxe-vctrjy {padding-top: 0; grid-gap: 8px}}#brxe-mapioi {width: 26px}#brxe-ljtxvt {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}#brxe-cvcpes {width: 26px}#brxe-lyuhhk {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}#brxe-hgotcj {width: 26px}#brxe-bykspj {background-color: hsl(0, 0%, 9%); padding-top: 9px; padding-right: 13px; padding-bottom: 9px; padding-left: 13px}@media (max-width: 478px) {#brxe-tdfybi {grid-gap: 8px}}@media (max-width: 478px) {#brxe-fahtcv {display: flex; flex-direction: column}}#brxe-zbjpdg {font-size: 12px}#brxe-cemacs {font-size: 12px}#brxe-jxqjam {font-size: 12px}#brxe-zbjfkk {font-size: 12px}#brxe-mxrdrj {font-size: 12px}#brxe-yszfss {column-gap: 2px}#brxe-wrmrhd {color: #999999; width: 77%}#brxe-xnqmqi {color: #999999}#brxe-vficps {position: absolute; top: 0px; right: 0px; height: 100%}#brxe-vficps:not(.tag), #brxe-vficps img {object-fit: cover}#brxe-twnbjc {justify-content: flex-end; background-position: center center}#brxe-pyjark {column-gap: 2px}#brxe-vlybxx {color: #999999; width: 42%}#brxe-tqgvos {position: absolute; top: 0px; right: 0px; height: 100%}#brxe-tqgvos:not(.tag), #brxe-tqgvos img {object-fit: cover}#brxe-euwojh {background-position: center center; justify-content: flex-end}#brxe-nzlkyc {border-top: 1px solid var(--white-trans-20); background-color: #0D0D0D}@media (max-width: 478px) {#brxe-ryxdga {overflow: hidden}}@media (max-width: 478px) {#contactanos {overflow: hidden}}@media (max-width: 478px) {#brxe-ljeozg {flex-direction: column}}@layer bricks {@media (max-width: 767px) {#brxe-msztos .bricks-nav-menu-wrapper { display: none; }#brxe-msztos .bricks-mobile-menu-toggle { display: block; }}}#brxe-msztos .bricks-nav-menu {gap: 22px}#brxe-msztos .bricks-nav-menu > li {margin-left: 0}#brxe-msztos .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-msztos .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-msztos {display: none}}#brxe-cjfcwd {background-image: url("/assets/img/uploads/Adobe-Express-2026-02-02-21.50.41-1-1-1.png"); background-size: cover; padding-bottom: 90px; position: relative}:where(#brxe-cjfcwd > *:not(figcaption)) {position: relative}#brxe-cjfcwd::before {background-image: linear-gradient(rgba(0, 0, 0, 0.97) 3%, rgba(0, 0, 0, 0) 59%); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 767px) {#brxe-pupeku .bricks-site-logo {height: 39px}}@media (max-width: 767px) {#brxe-wiyvku {font-size: 33px}}@media (max-width: 478px) {#brxe-wiyvku {font-size: 24px}}@media (max-width: 767px) {#brxe-ueagqx {font-size: 33px}}@media (max-width: 478px) {#brxe-ueagqx {font-size: 24px}}@media (max-width: 767px) {#brxe-yqvdeq .brx-dropdown-content {background-color: var(--action)}#brxe-yqvdeq .brx-dropdown-content > li [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li .aria-current {background-color: var(--action-light)}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li > a {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq .brx-dropdown-content .brx-submenu-toggle > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}}@media (max-width: 767px) {#brxe-jtgpdc {font-size: 33px}}@media (max-width: 478px) {#brxe-jtgpdc {font-size: 24px}}@media (max-width: 767px) {#brxe-pmnjue {font-size: 33px}}@media (max-width: 478px) {#brxe-pmnjue {font-size: 24px}}@media (max-width: 767px) {#brxe-inajeq {font-size: 33px}}@media (max-width: 478px) {#brxe-inajeq {font-size: 24px}}@media (max-width: 767px) {#brxe-yfeuba {margin-top: 61px}#brxe-yfeuba.horizontal .line {border-top-color: var(--white-trans-20)}#brxe-yfeuba.vertical .line {border-right-color: var(--white-trans-20)}#brxe-yfeuba .icon {color: var(--white-trans-20)}}@media (max-width: 478px) {#brxe-jhhgdv {height: 100%}}#brxe-kcmpke {--x-offcanvas-duration: 550ms}@media (max-width: 767px) {#brxe-kcmpke .x-offcanvas_inner {width: 500px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgba(22, 2, 48, 0.96)}#brxe-kcmpke {z-index: 999999}}@media (max-width: 478px) {#brxe-kcmpke .x-offcanvas_inner {width: 340px}}#brxe-boievm {right: 40px; bottom: 98px; transform: translateY(10px)}#brxe-boievm .x-back-to-top_progress-line {stroke: var(--white)}#brxe-boievm .x-back-to-top_icon > * {color: var(--white)}
/*# sourceURL=bricks-frontend-inline-inline-css */
/* from politicas-de-privacidad.html #bricks-frontend-inline-css */
body .tox.tox-silver-sink.tox-tinymce-aux, body .tox.tox-tinymce-aux, body .tox-shadowhost { z-index: 10001; }
:root { --x-backtotop-stroke-width: 4px;}[data-x-backtotop] { position: fixed; background: none; border: none; box-shadow: none; z-index: 10; box-shadow: 10px 10px 30px 0 rgb(0 0 0 / 12%); transition: all .125s ease-in; text-align: center; opacity: 0; width: 60px; height: 60px; right: 40px; bottom: 40px; transform: translateY(10px);}[data-x-backtotop*=progress] { height: auto!important;}[data-x-backtotop*=progress] { border-radius: 1000px;}body.bricks-is-frontend [data-x-backtotop]:focus { outline: none;}body.bricks-is-frontend [data-x-backtotop]:focus-visible { outline: thin dotted currentcolor;}.x-back-to-top.brx-draggable.is-empty { min-height: 0; min-width: 0;}.x-back-to-top[aria-hidden=true] { pointer-events: none;}.x-back-to-top_progress { vertical-align: middle; overflow: visible; z-index: 1;}svg.x-back-to-top_progress:not(:root) { overflow: visible;}.x-back-to-top_content { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; width: 100%;}[data-x-backtotop*=progress] .x-back-to-top_content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; border-radius: 1000px;}.x-back-to-top_progress-line { fill: transparent; stroke-width: calc( var(--x-backtotop-stroke-width) + 1px); stroke: #111; stroke-linecap: round;}.x-back-to-top_progress-background { stroke: #e5e5e5; fill: transparent; stroke-width: var(--x-backtotop-stroke-width);}svg.x-back-to-top_progress { inline-size: auto;}.x-back-to-top_builder-preview { opacity: 1!important; transform: none!important;}.brx-body.iframe [data-x-backtotop].brx-draggable { transition: all .125s ease-in}.brx-body.iframe .x-back-to-top { transition-property: all!important;}.brx-body.iframe .brx-draggable.is-empty:not(.editing) { outline: none;}
.x-hamburger{font:inherit;display:inline-flex;overflow:visible;margin:0;padding:15px;cursor:pointer;transition-timing-function:linear;transition-duration:.3s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}.x-hamburger.is-active:hover,.x-hamburger:hover{opacity:.7}.x-hamburger.is-active .x-hamburger-inner,.x-hamburger.is-active .x-hamburger-inner:after,.x-hamburger.is-active .x-hamburger-inner:before{background-color:var(--x-burger-line-color)}.x-hamburger-box{position:relative;display:inline-block;width:40px;height:24px}.x-hamburger-inner{top:50%;display:block;margin-top:-2px}.x-hamburger-inner,.x-hamburger-inner:after,.x-hamburger-inner:before{position:absolute;width:40px;height:4px;transition-timing-function:ease;transition-duration:.3s;transition-property:transform;border-radius:var(--x-burger-line-radius);background-color:var(--x-burger-line-color)}.x-hamburger-inner:after,.x-hamburger-inner:before{display:block;content:""}.x-hamburger-inner:before{top:-10px}.x-hamburger-inner:after{bottom:-10px}.x-hamburger--3dx .x-hamburger-box{perspective:80px}.x-hamburger--3dx .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx .x-hamburger-inner:after,.x-hamburger--3dx .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx.is-active .x-hamburger-inner{transform:rotateY(180deg);background-color:transparent!important}.x-hamburger--3dx.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dx.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dx-r .x-hamburger-box{perspective:80px}.x-hamburger--3dx-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx-r .x-hamburger-inner:after,.x-hamburger--3dx-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx-r.is-active .x-hamburger-inner{transform:rotateY(-180deg);background-color:transparent!important}.x-hamburger--3dx-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dx-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dy .x-hamburger-box{perspective:80px}.x-hamburger--3dy .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy .x-hamburger-inner:after,.x-hamburger--3dy .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy.is-active .x-hamburger-inner{transform:rotateX(-180deg);background-color:transparent!important}.x-hamburger--3dy.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dy.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dy-r .x-hamburger-box{perspective:80px}.x-hamburger--3dy-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy-r .x-hamburger-inner:after,.x-hamburger--3dy-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy-r.is-active .x-hamburger-inner{transform:rotateX(180deg);background-color:transparent!important}.x-hamburger--3dy-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dy-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dxy .x-hamburger-box{perspective:80px}.x-hamburger--3dxy .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy .x-hamburger-inner:after,.x-hamburger--3dxy .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy.is-active .x-hamburger-inner{transform:rotateX(180deg) rotateY(180deg);background-color:transparent!important}.x-hamburger--3dxy.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dxy.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dxy-r .x-hamburger-box{perspective:80px}.x-hamburger--3dxy-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy-r .x-hamburger-inner:after,.x-hamburger--3dxy-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy-r.is-active .x-hamburger-inner{transform:rotateX(180deg) rotateY(180deg) rotate(-180deg);background-color:transparent!important}.x-hamburger--3dxy-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dxy-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--arrow.is-active .x-hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrow.is-active .x-hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrow-r.is-active .x-hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrow-r.is-active .x-hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowalt .x-hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt .x-hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,-10px,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowalt.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,10px,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowalt-r .x-hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt-r .x-hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,-10px,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowalt-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,10px,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn.is-active .x-hamburger-inner{transform:rotate(-180deg)}.x-hamburger--arrowturn.is-active .x-hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowturn.is-active .x-hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner{transform:rotate(-180deg)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--boring .x-hamburger-inner,.x-hamburger--boring .x-hamburger-inner:after,.x-hamburger--boring .x-hamburger-inner:before{transition-property:none}.x-hamburger--boring.is-active .x-hamburger-inner{transform:rotate(45deg)}.x-hamburger--boring.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--boring.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(-90deg)}.x-hamburger--collapse .x-hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--collapse .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.x-hamburger--collapse .x-hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--collapse.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--collapse.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.x-hamburger--collapse.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(-90deg)}.x-hamburger--collapse-r .x-hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--collapse-r .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.x-hamburger--collapse-r .x-hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--collapse-r.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(45deg)}.x-hamburger--collapse-r.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.x-hamburger--collapse-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(90deg)}.x-hamburger--elastic .x-hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.x-hamburger--elastic .x-hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.x-hamburger--elastic .x-hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.x-hamburger--elastic.is-active .x-hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(135deg)}.x-hamburger--elastic.is-active .x-hamburger-inner:before{transition-delay:0s;opacity:0}.x-hamburger--elastic.is-active .x-hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(-270deg)}.x-hamburger--elastic-r .x-hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.x-hamburger--elastic-r .x-hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.x-hamburger--elastic-r .x-hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.x-hamburger--elastic-r.is-active .x-hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(-135deg)}.x-hamburger--elastic-r.is-active .x-hamburger-inner:before{transition-delay:0s;opacity:0}.x-hamburger--elastic-r.is-active .x-hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(270deg)}.x-hamburger--emphatic{overflow:hidden}.x-hamburger--emphatic .x-hamburger-inner{transition:background-color .125s ease-in .175s}.x-hamburger--emphatic .x-hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.x-hamburger--emphatic .x-hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.x-hamburger--emphatic.is-active .x-hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.x-hamburger--emphatic.is-active .x-hamburger-inner:before{top:-80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,80px,0) rotate(45deg)}.x-hamburger--emphatic.is-active .x-hamburger-inner:after{top:-80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,80px,0) rotate(-45deg)}.x-hamburger--emphatic-r{overflow:hidden}.x-hamburger--emphatic-r .x-hamburger-inner{transition:background-color .125s ease-in .175s}.x-hamburger--emphatic-r .x-hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.x-hamburger--emphatic-r .x-hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.x-hamburger--emphatic-r.is-active .x-hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.x-hamburger--emphatic-r.is-active .x-hamburger-inner:before{top:80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,-80px,0) rotate(-45deg)}.x-hamburger--emphatic-r.is-active .x-hamburger-inner:after{top:80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,-80px,0) rotate(45deg)}.x-hamburger--minus .x-hamburger-inner:after,.x-hamburger--minus .x-hamburger-inner:before{transition:bottom .08s ease-out 0s,top .08s ease-out 0s,opacity 0s linear}.x-hamburger--minus.is-active .x-hamburger-inner:after,.x-hamburger--minus.is-active .x-hamburger-inner:before{transition:bottom .08s ease-out,top .08s ease-out,opacity 0s linear .08s;opacity:0}.x-hamburger--minus.is-active .x-hamburger-inner:before{top:0}.x-hamburger--minus.is-active .x-hamburger-inner:after{bottom:0}.x-hamburger--slider .x-hamburger-inner{top:2px}.x-hamburger--slider .x-hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.4s;transition-property:transform,opacity}.x-hamburger--slider .x-hamburger-inner:after{top:20px}.x-hamburger--slider.is-active .x-hamburger-inner{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--slider.is-active .x-hamburger-inner:before{transform:rotate(-45deg) translate3d(-5.71429px,-6px,0);opacity:0}.x-hamburger--slider.is-active .x-hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(-90deg)}.x-hamburger--slider-r .x-hamburger-inner{top:2px}.x-hamburger--slider-r .x-hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.4s;transition-property:transform,opacity}.x-hamburger--slider-r .x-hamburger-inner:after{top:20px}.x-hamburger--slider-r.is-active .x-hamburger-inner{transform:translate3d(0,10px,0) rotate(-45deg)}.x-hamburger--slider-r.is-active .x-hamburger-inner:before{transform:rotate(45deg) translate3d(5.71429px,-6px,0);opacity:0}.x-hamburger--slider-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(90deg)}.x-hamburger--spin .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.x-hamburger--spin .x-hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.x-hamburger--spin .x-hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spin.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(225deg)}.x-hamburger--spin.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.x-hamburger--spin.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.x-hamburger--spin-r .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.x-hamburger--spin-r .x-hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.x-hamburger--spin-r .x-hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spin-r.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}.x-hamburger--spin-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.x-hamburger--spin-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg)}.x-hamburger--spring .x-hamburger-inner{top:2px;transition:background-color 0s linear .13s}.x-hamburger--spring .x-hamburger-inner:before{top:10px;transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring .x-hamburger-inner:after{top:20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring.is-active .x-hamburger-inner{transition-delay:.22s;background-color:transparent!important}.x-hamburger--spring.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .4s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--spring.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(-45deg)}.x-hamburger--spring-r .x-hamburger-inner{top:auto;bottom:0;transition-delay:0s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--spring-r .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear}.x-hamburger--spring-r .x-hamburger-inner:before{transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring-r.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--spring-r.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;opacity:0}.x-hamburger--spring-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .4s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:rotate(90deg)}.x-hamburger--stand .x-hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .4s,background-color 0s linear 75ms}.x-hamburger--stand .x-hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand .x-hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand.is-active .x-hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .4s;transform:rotate(90deg);background-color:transparent!important}.x-hamburger--stand.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(-45deg)}.x-hamburger--stand.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(45deg)}.x-hamburger--stand-r .x-hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .4s,background-color 0s linear 75ms}.x-hamburger--stand-r .x-hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand-r .x-hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand-r.is-active .x-hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .4s;transform:rotate(-90deg);background-color:transparent!important}.x-hamburger--stand-r.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(-45deg)}.x-hamburger--stand-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(45deg)}.x-hamburger--squeeze .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms}.x-hamburger--squeeze .x-hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease}.x-hamburger--squeeze .x-hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)}.x-hamburger--squeeze.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.x-hamburger--squeeze.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0}.x-hamburger--squeeze.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.x-hamburger--vortex .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.x-hamburger--vortex .x-hamburger-inner:after,.x-hamburger--vortex .x-hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.x-hamburger--vortex .x-hamburger-inner:before{transition-property:top,opacity}.x-hamburger--vortex .x-hamburger-inner:after{transition-property:bottom,transform}.x-hamburger--vortex.is-active .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(765deg)}.x-hamburger--vortex.is-active .x-hamburger-inner:after,.x-hamburger--vortex.is-active .x-hamburger-inner:before{transition-delay:0s}.x-hamburger--vortex.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--vortex.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(90deg)}.x-hamburger--vortex-r .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.x-hamburger--vortex-r .x-hamburger-inner:after,.x-hamburger--vortex-r .x-hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.x-hamburger--vortex-r .x-hamburger-inner:before{transition-property:top,opacity}.x-hamburger--vortex-r .x-hamburger-inner:after{transition-property:bottom,transform}.x-hamburger--vortex-r.is-active .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(-765deg)}.x-hamburger--vortex-r.is-active .x-hamburger-inner:after,.x-hamburger--vortex-r.is-active .x-hamburger-inner:before{transition-delay:0s}.x-hamburger--vortex-r.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--vortex-r.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(-90deg)}:root { --x-burger-size: 0.8; --x-burger-line-height: 4px; --x-burger-line-color: currentColor;--x-burger-line-radius: 4px;--x-burger-line-color-active: var(--x-burger-line-color);}.brxe-xburgertrigger { background: none;color: inherit;display: inline-flex; cursor: pointer; padding: 10px;line-height: 1;-webkit-tap-highlight-color: transparent;align-items: center;}.brxe-xburgertrigger[class*=brxe-] { width: auto;}.x-hamburger-box {display:flex; background: none;pointer-events: none;transform: scale(var(--x-burger-size));-webkit-transform: scale(var(--x-burger-size));color: var(--x-burger-line-color);}.x-hamburger-box.is-active .x-hamburger-inner {background-color: var(--x-burger-line-color-active);}.brxe-xburgertrigger .x-hamburger-inner:before,.brxe-xburgertrigger .x-hamburger-inner:after {height: inherit;background-color: inherit;}.x-hamburger-inner {height: var(--x-burger-line-height);}
:root { --x-offcanvas-duration: 300ms;}.x-offcanvas_inner { background: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; height: 100vh; max-width: 100%; width: 300px; overflow-x: hidden; top: 0; left: 0; padding: 30px; z-index: 1000; pointer-events: auto; display: none;}.x-offcanvas_ready { -webkit-transition: -webkit-transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); transition: transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),opacity var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); -o-transition: -o-transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); display: -webkit-box; display: -ms-flexbox; display: flex;}.x-offcanvas_backdrop { background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); -o-transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); pointer-events: auto; z-index: 1000; display: none;}.x-offcanvas_ready + .x-offcanvas_backdrop { display: block;}.x-offcanvas_inner { z-index: 1001;}.x-offcanvas_inner[aria-hidden="false"] + .x-offcanvas_backdrop { opacity: 1; visibility: visible;}.x-offcanvas_inner.x-offcanvas_left { left: 0; right: auto; height: 100vh!important;}.x-offcanvas_inner.x-offcanvas_left[aria-hidden="true"] { transform: translateX(-100%); -webkit-transform: translateX(-100%);}.x-offcanvas_inner.x-offcanvas_right { right: 0; left: auto; height: 100vh!important;}.x-offcanvas_inner.x-offcanvas_right[aria-hidden="true"] { transform: translateX(100%); -webkit-transform: translateX(100%);}.x-offcanvas_inner.x-offcanvas_top { top: 0; bottom: auto; right: 0; left: 0; width: 100%!important;}.x-offcanvas_inner.x-offcanvas_top[aria-hidden="true"] { transform: translateY(-100%); -webkit-transform: translateY(-100%);}.x-offcanvas_inner.x-offcanvas_bottom { top: auto; bottom: 0; right: 0; left: 0; width: 100%!important;}.x-offcanvas_inner.x-offcanvas_bottom[aria-hidden="true"] { transform: translateY(100%); -webkit-transform: translateY(100%);}body.admin-bar .x-offcanvas_backdrop { margin-top: var(--wp-admin--admin-bar--height);}body.bricks-is-frontend .x-offcanvas_inner:focus { outline: none;}.admin-bar .x-offcanvas_inner { margin-top: var(--wp-admin--admin-bar--height);}.x-offcanvas_inner > div { max-width: 100%;}html[class*="x-offcanvas_prevent-scroll"],html[class*="x-offcanvas_prevent-scroll"] > body { overflow: hidden;}.x-offcanvas_inner[aria-hidden="true"][data-type="fade"] { opacity: 0; visibility: hidden; transform: none!important; transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1)}.x-offcanvas_inner[aria-hidden="false"][data-type="fade"] { opacity: 1; visibility: visible; transform: none!important;}@media (prefers-reduced-motion: reduce) { .x-offcanvas[data-x-offcanvas*=notransition] .x-offcanvas_backdrop, .x-offcanvas[data-x-offcanvas*=notransition] .x-offcanvas_inner { transition: none; } .x-offcanvas[data-x-offcanvas*=fade] .x-offcanvas_inner[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: none!important; } .x-offcanvas[data-x-offcanvas*=fade].x-offcanvas_inner[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none!important; }}@supports (padding-top: env(safe-area-inset-top)) { .x-offcanvas_inner.x-offcanvas_left { --safe-area-inset-bottom: env(safe-area-inset-bottom); height: calc(100% + var(--safe-area-inset-bottom))!important; } .x-offcanvas_inner.x-offcanvas_right { --safe-area-inset-bottom: env(safe-area-inset-bottom); height: calc(100% + var(--safe-area-inset-bottom))!important; } }.admin-bar .x-offcanvas_inner.x-offcanvas_left { left: 0; right: auto; height: auto!important; bottom: 0;}.admin-bar .x-offcanvas_inner.x-offcanvas_right { right: 0; left: auto; height: auto!important; bottom: 0;}component.x-offcanvas,.x-offcanvas[data-id] { transform: none!important;}component.x-offcanvas.is-empty { min-width: 0; min-height: 0;}component > .x-offcanvas_inner,.x-offcanvas[data-id] .x-offcanvas_inner { display: flex;}component > .x-offcanvas_backdrop,.x-offcanvas[data-id] .x-offcanvas_backdrop { display: block;}.brx-body.iframe .x-offcanvas_inner { transform: none;}.brx-body.iframe div[data-x-offcanvas]:not([data-id]) { display: none;}.brx-body.iframe .x-offcanvas > div:nth-child(3) { display: none;}.brx-body.iframe .x-offcanvas_backdrop { opacity: 1; visibility: visible;}
/*# sourceURL=bricks-frontend-inline-css */
/* from politicas-de-privacidad.html #bricks-frontend-inline-inline-css */
html {scroll-behavior: smooth}:root {--min-viewport: 360;--max-viewport: 1600;--base-font: 10;--clamp-unit: 1vw;} body {color: var(--white)} h1, h2, h3, h4, h5, h6 {color: var(--white)} html {background-color: var(--black)} body {background: none}.gradiant--black__hero.brxe-section {position: relative; justify-content: center}:where(.gradiant--black__hero.brxe-section > *:not(figcaption)) {position: relative}.gradiant--black__hero.brxe-section::before {background-image: linear-gradient(rgba(0, 0, 0, 0), var(--black)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 478px) {.gradiant--black__hero.brxe-section {padding-bottom: 26px}}.btn.brxe-text-basic {align-self: center}@media (max-width: 478px) {.btn.brxe-text-basic {font-size: calc(var(text--s)*.7)}}.btn.brxe-div {align-self: center !important}@media (max-width: 478px) {.btn.brxe-div {font-size: calc(var(text--s)*.7)}}:root {--bricks-color-acss_import_transparent: transparent;}:root[data-brx-theme="dark"] {--bricks-color-acss_import_transparent: transparent;}#brxe-xauazf .bricks-site-logo {width: 56%}@layer bricks {@media (max-width: 767px) {#brxe-sguayd .bricks-nav-menu-wrapper { display: none; }#brxe-sguayd .bricks-mobile-menu-toggle { display: block; }}}#brxe-sguayd .bricks-nav-menu {gap: 22px}#brxe-sguayd .bricks-nav-menu > li {margin-left: 0}#brxe-sguayd .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-sguayd .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-sguayd {display: none}}@media (max-width: 478px) {#brxe-hunuon {display: none}}#brxe-hcsajr:hover {color: var(--white)}@media (max-width: 767px) {#brxe-hcsajr {display: none}}#brxe-kguvku {display: none}@media (max-width: 991px) {#brxe-kguvku {display: flex}#brxe-kguvku .x-hamburger-box {--x-burger-size: 1; --x-burger-line-height: 1px; --x-burger-line-radius: 1px}}#brxe-qdszty {font-weight: 900}#brxe-gmnxqa {row-gap: 6px}#brxe-skrvhd {background-image: url("https://octopusinnovations.com.py/wp-content/uploads/2026/06/Frame-21-1.png"); background-size: cover; background-position: center center; padding-top: 135px}#brxe-svfyka {font-weight: 900}#brxe-xfqjir {background-image: url("https://josebaylon.soymipagina.com/wp-content/uploads/2025/07/photo-1533035353720-f1c6a75cd8ab-scaled.avif"); background-size: cover}@media (max-width: 478px) {#brxe-ljeozg {flex-direction: column}}@layer bricks {@media (max-width: 767px) {#brxe-msztos .bricks-nav-menu-wrapper { display: none; }#brxe-msztos .bricks-mobile-menu-toggle { display: block; }}}#brxe-msztos .bricks-nav-menu {gap: 22px}#brxe-msztos .bricks-nav-menu > li {margin-left: 0}#brxe-msztos .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-msztos .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-msztos {display: none}}#brxe-cjfcwd {background-image: url("/assets/img/uploads/Adobe-Express-2026-02-02-21.50.41-1-1-1.png"); background-size: cover; padding-bottom: 90px; position: relative}:where(#brxe-cjfcwd > *:not(figcaption)) {position: relative}#brxe-cjfcwd::before {background-image: linear-gradient(rgba(0, 0, 0, 0.97) 3%, rgba(0, 0, 0, 0) 59%); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 767px) {#brxe-pupeku .bricks-site-logo {height: 39px}}@media (max-width: 767px) {#brxe-wiyvku {font-size: 33px}}@media (max-width: 478px) {#brxe-wiyvku {font-size: 24px}}@media (max-width: 767px) {#brxe-ueagqx {font-size: 33px}}@media (max-width: 478px) {#brxe-ueagqx {font-size: 24px}}@media (max-width: 767px) {#brxe-yqvdeq .brx-dropdown-content {background-color: var(--action)}#brxe-yqvdeq .brx-dropdown-content > li [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li .aria-current {background-color: var(--action-light)}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li > a {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq .brx-dropdown-content .brx-submenu-toggle > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}}@media (max-width: 767px) {#brxe-jtgpdc {font-size: 33px}}@media (max-width: 478px) {#brxe-jtgpdc {font-size: 24px}}@media (max-width: 767px) {#brxe-pmnjue {font-size: 33px}}@media (max-width: 478px) {#brxe-pmnjue {font-size: 24px}}@media (max-width: 767px) {#brxe-inajeq {font-size: 33px}}@media (max-width: 478px) {#brxe-inajeq {font-size: 24px}}@media (max-width: 767px) {#brxe-yfeuba {margin-top: 61px}#brxe-yfeuba.horizontal .line {border-top-color: var(--white-trans-20)}#brxe-yfeuba.vertical .line {border-right-color: var(--white-trans-20)}#brxe-yfeuba .icon {color: var(--white-trans-20)}}@media (max-width: 478px) {#brxe-jhhgdv {height: 100%}}#brxe-kcmpke {--x-offcanvas-duration: 550ms}@media (max-width: 767px) {#brxe-kcmpke .x-offcanvas_inner {width: 500px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgba(22, 2, 48, 0.96)}#brxe-kcmpke {z-index: 999999}}@media (max-width: 478px) {#brxe-kcmpke .x-offcanvas_inner {width: 340px}}#brxe-boievm {right: 40px; bottom: 98px; transform: translateY(10px)}#brxe-boievm .x-back-to-top_progress-line {stroke: var(--white)}#brxe-boievm .x-back-to-top_icon > * {color: var(--white)}
/*# sourceURL=bricks-frontend-inline-inline-css */
/* from selector.html #bricks-frontend-inline-css */
body .tox.tox-silver-sink.tox-tinymce-aux, body .tox.tox-tinymce-aux, body .tox-shadowhost { z-index: 10001; }
/*# sourceURL=bricks-frontend-inline-css */
/* from selector.html #bricks-frontend-inline-inline-css */
html {scroll-behavior: smooth}:root {--min-viewport: 360;--max-viewport: 1600;--base-font: 10;--clamp-unit: 1vw;} body {color: var(--white)} h1, h2, h3, h4, h5, h6 {color: var(--white)} html {background-color: var(--black)} body {background: none}:root {--bricks-color-acss_import_transparent: transparent;}:root[data-brx-theme="dark"] {--bricks-color-acss_import_transparent: transparent;}#brxe-hceehl {width: 8%; margin-bottom: 30px}#brxe-hlaiao {font-weight: 700}#brxe-iyxesg {row-gap: 6px}#brxe-jwijqo {background-image: url("/assets/img/uploads/Video-3.png"); background-size: cover; background-position: center center; padding-top: 135px; justify-content: center}
/*# sourceURL=bricks-frontend-inline-inline-css */
/* from servicios.html #bricks-frontend-inline-inline-css */
html {scroll-behavior: smooth}:root {--min-viewport: 360;--max-viewport: 1600;--base-font: 10;--clamp-unit: 1vw;} body {color: var(--white)} h1, h2, h3, h4, h5, h6 {color: var(--white)} html {background-color: var(--black)} body {background: none}.gradiant--black__hero.brxe-section {position: relative; justify-content: center}:where(.gradiant--black__hero.brxe-section > *:not(figcaption)) {position: relative}.gradiant--black__hero.brxe-section::before {background-image: linear-gradient(rgba(0, 0, 0, 0), var(--black)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 478px) {.gradiant--black__hero.brxe-section {padding-bottom: 26px}}.color-text_grey.brxe-text-basic {color: #999999}.color-text_grey.brxe-post-content {color: #999999}.btn.brxe-text-basic {align-self: center}@media (max-width: 478px) {.btn.brxe-text-basic {font-size: calc(var(text--s)*.7)}}.btn.brxe-div {align-self: center !important}@media (max-width: 478px) {.btn.brxe-div {font-size: calc(var(text--s)*.7)}}:root {--bricks-color-acss_import_transparent: transparent;}:root[data-brx-theme="dark"] {--bricks-color-acss_import_transparent: transparent;}#brxe-xauazf .bricks-site-logo {width: 56%}@layer bricks {@media (max-width: 767px) {#brxe-sguayd .bricks-nav-menu-wrapper { display: none; }#brxe-sguayd .bricks-mobile-menu-toggle { display: block; }}}#brxe-sguayd .bricks-nav-menu {gap: 22px}#brxe-sguayd .bricks-nav-menu > li {margin-left: 0}#brxe-sguayd .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-sguayd .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-sguayd .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-sguayd {display: none}}@media (max-width: 478px) {#brxe-hunuon {display: none}}#brxe-hcsajr:hover {color: var(--white)}@media (max-width: 767px) {#brxe-hcsajr {display: none}}#brxe-kguvku {display: none}@media (max-width: 991px) {#brxe-kguvku {display: flex}#brxe-kguvku .x-hamburger-box {--x-burger-size: 1; --x-burger-line-height: 1px; --x-burger-line-radius: 1px}}#brxe-kyicok {align-self: center !important; align-items: center}#brxe-menmta {background-image: linear-gradient(180deg, var(--action), var(--black)); padding-top: 157px}.brxe-xmeaad .brxe-bppukf.brxe-post-title {font-family: "MuseoSans"; font-weight: 500}@media (max-width: 478px) {#brxe-ljeozg {flex-direction: column}}@layer bricks {@media (max-width: 767px) {#brxe-msztos .bricks-nav-menu-wrapper { display: none; }#brxe-msztos .bricks-mobile-menu-toggle { display: block; }}}#brxe-msztos .bricks-nav-menu {gap: 22px}#brxe-msztos .bricks-nav-menu > li {margin-left: 0}#brxe-msztos .bricks-nav-menu > li > a {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu > li > .brx-submenu-toggle > * {font-size: 15px; color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu a {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu button {padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {background-color: var(--action-semi-light); color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle {background-color: var(--action-semi-light)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu {background-color: var(--action); border-radius: 20px}#brxe-msztos .bricks-nav-menu .sub-menu > li > a {color: var(--white)}#brxe-msztos .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--white)}@media (max-width: 767px) {#brxe-msztos {display: none}}#brxe-cjfcwd {background-image: url("/assets/img/uploads/Adobe-Express-2026-02-02-21.50.41-1-1-1.png"); background-size: cover; padding-bottom: 90px; position: relative}:where(#brxe-cjfcwd > *:not(figcaption)) {position: relative}#brxe-cjfcwd::before {background-image: linear-gradient(rgba(0, 0, 0, 0.97) 3%, rgba(0, 0, 0, 0) 59%); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none}@media (max-width: 767px) {#brxe-pupeku .bricks-site-logo {height: 39px}}@media (max-width: 767px) {#brxe-wiyvku {font-size: 33px}}@media (max-width: 478px) {#brxe-wiyvku {font-size: 24px}}@media (max-width: 767px) {#brxe-ueagqx {font-size: 33px}}@media (max-width: 478px) {#brxe-ueagqx {font-size: 24px}}@media (max-width: 767px) {#brxe-yqvdeq .brx-dropdown-content {background-color: var(--action)}#brxe-yqvdeq .brx-dropdown-content > li [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li .aria-current {background-color: var(--action-light)}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content [aria-current="page"] {background-color: var(--action-light)}#brxe-yqvdeq .brx-dropdown-content > li > a {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq .brx-dropdown-content .brx-submenu-toggle > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}#brxe-yqvdeq.brx-has-megamenu .brx-dropdown-content > * {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}}@media (max-width: 767px) {#brxe-jtgpdc {font-size: 33px}}@media (max-width: 478px) {#brxe-jtgpdc {font-size: 24px}}@media (max-width: 767px) {#brxe-pmnjue {font-size: 33px}}@media (max-width: 478px) {#brxe-pmnjue {font-size: 24px}}@media (max-width: 767px) {#brxe-inajeq {font-size: 33px}}@media (max-width: 478px) {#brxe-inajeq {font-size: 24px}}@media (max-width: 767px) {#brxe-yfeuba {margin-top: 61px}#brxe-yfeuba.horizontal .line {border-top-color: var(--white-trans-20)}#brxe-yfeuba.vertical .line {border-right-color: var(--white-trans-20)}#brxe-yfeuba .icon {color: var(--white-trans-20)}}@media (max-width: 478px) {#brxe-jhhgdv {height: 100%}}#brxe-kcmpke {--x-offcanvas-duration: 550ms}@media (max-width: 767px) {#brxe-kcmpke .x-offcanvas_inner {width: 500px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgba(22, 2, 48, 0.96)}#brxe-kcmpke {z-index: 999999}}@media (max-width: 478px) {#brxe-kcmpke .x-offcanvas_inner {width: 340px}}#brxe-boievm {right: 40px; bottom: 98px; transform: translateY(10px)}#brxe-boievm .x-back-to-top_progress-line {stroke: var(--white)}#brxe-boievm .x-back-to-top_icon > * {color: var(--white)}
/*# sourceURL=bricks-frontend-inline-inline-css */
/* Contact form theming: rounded fields + dark dropdown popup that matches
the page instead of the browser's default white-on-white/blue-highlight. */
.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group select,
.fluent--style__oc.brxe-xfluentform .fluentform .ff-el-group textarea {
border-radius: 14px;
}
.fluentform .ff-el-group select option {
background-color: #16121f;
color: rgba(255, 255, 255, 0.85);
}
/* Custom-styled replacement for the "Servicio de interes" native select
(see /assets/js/custom-select.js) so hover/selection colors are fully
controllable instead of relying on the browser's native popup theming. */
.fluentform select.oct-select-native {
display: none !important;
}
.oct-select-wrap {
position: relative;
}
.oct-select-trigger {
width: 100%;
text-align: left;
background-color: transparent;
border: 1px solid hsla(0, 0%, 99%, 0.12);
border-radius: 14px;
color: rgba(255, 255, 255, 0.58);
font: inherit;
padding: 11px 34px 11px 15px;
cursor: pointer;
position: relative;
}
.oct-select-trigger::after {
content: "";
position: absolute;
right: 15px;
top: 50%;
width: 8px;
height: 8px;
border-right: 1.5px solid rgba(255, 255, 255, 0.58);
border-bottom: 1.5px solid rgba(255, 255, 255, 0.58);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.oct-select-trigger:focus {
outline: none;
border-color: #A46BFD;
}
.oct-select-list {
display: none;
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 30;
margin: 0;
padding: 6px;
list-style: none;
background-color: #16121f;
border: 1px solid hsla(0, 0%, 99%, 0.12);
border-radius: 14px;
max-height: 280px;
overflow-y: auto;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.oct-select-wrap.is-open .oct-select-list {
display: block;
}
.oct-select-option {
padding: 10px 12px;
border-radius: 8px;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
}
.oct-select-option:hover {
background-color: #A46BFD;
color: #ffffff;
}
#brxe-moscva .bricks-nav-menu .sub-menu,
#brxe-moscva .bricks-mobile-menu .sub-menu {
border-radius: 4px;
}
#brxe-moscva .bricks-nav-menu .sub-menu > li > a,
#brxe-moscva .bricks-mobile-menu .sub-menu > li > a {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 3px;
transition: background-color 150ms ease, color 150ms ease;
}
#brxe-moscva .bricks-nav-menu .sub-menu > li > a:hover,
#brxe-moscva .bricks-nav-menu .sub-menu > li > a:focus-visible,
#brxe-moscva .bricks-mobile-menu .sub-menu > li > a:hover,
#brxe-moscva .bricks-mobile-menu .sub-menu > li > a:focus-visible {
background-color: #684494;
color: #ffffff;
}
#brxe-xwazws,
#brxe-xwazws:hover {
background-color: #E4A900;
font-weight: 700;
}
/* Pills: mismo padding en todo el sitio (igual que los del header) */
:root {
--pill-padding-x: 18px;
--pill-padding-y: 10px;
}
.pill,
.btn,
.btn-filtro,
.subtittle--service {
padding: var(--pill-padding-y) var(--pill-padding-x);
}
/* Iconos Font Awesome de las tarjetas (reemplazan a los emojis) */
.oct-fa-icon {
color: var(--action);
font-size: 26px;
line-height: 1;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
/* Botón "Solicitar implementación" centrado en el hero de los servicios */
.brxe-div:has(> a[href="#implementacion"]) {
display: flex;
justify-content: center;
margin-inline: auto;
}
/* En páginas internas el menú flota sobre el hero de la página (como en el sitio original) */
#brx-header.oct-header-float {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: none;
}
#brx-header.oct-header-float > .brxe-section {
padding-top: 16px;
padding-bottom: 0;
min-height: 0;
height: auto;
background: none;
}
/* Barra de menú más delgada */
.lg-header-wrapper { min-height: 56px; }
.lg-capsule { padding: 6px 8px 6px 28px; }
.lg-header-container.lg-scrolled .lg-capsule { padding-top: 5px; padding-bottom: 5px; }
.lg-capsule .bricks-site-logo { height: 24px; width: auto; }
.lg-btn-contact { padding: 8px 22px; }
.lg-country-pill { padding: 6px 14px; }
/* Deja espacio arriba del hero de las páginas internas para que el menú flotante no lo tape */
#brx-header.oct-header-float ~ main#brx-content > section:first-child,
#brx-header.oct-header-float ~ main#brx-content .brxe-post-content > section:first-child {
padding-top: 140px;
}
/* Iconos flotantes del hero de las páginas de servicio: uno a cada lado, con su flecha hacia el título */
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute {
display: flex;
align-items: center;
gap: 14px;
top: 14%;
left: 3%;
right: auto;
z-index: 1;
}
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute ~ .brxe-div.absolute {
left: auto;
right: 3%;
flex-direction: row-reverse;
}
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute > img {
width: 84px;
height: auto;
flex: none;
transform: rotate(-8deg);
}
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute ~ .brxe-div.absolute > img {
transform: rotate(8deg);
}
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute > svg {
flex: none;
margin-top: 36px;
max-width: 90px;
height: auto;
}
/* la flecha de la derecha apunta hacia el ícono */
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute ~ .brxe-div.absolute > svg {
transform: scaleX(-1);
}
@media (max-width: 900px) {
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute > svg { display: none; }
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute > img { width: 56px; }
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute { top: 0; left: 4%; }
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute ~ .brxe-div.absolute { left: auto; right: 4%; }
}
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute > img[src$="Group.svg"] { transform: none; }
/* Formulario de demo reutilizable (DemoForm): mismo estilo que el formulario de contacto */
.demo-form.bricks-imp-form-card { align-self: start; }
.demo-form .odoo-form__section-title {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #a1a1aa;
margin: 18px 0 4px;
}
.demo-form .ff-el-input--label label {
color: #ffffff;
font-size: 13px;
font-weight: 500;
}
.demo-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--action); }
.demo-form .ff-t-container { gap: 16px; }
.demo-form .ff-el-group { margin-bottom: 16px; }
.demo-form .ff-el-group input:not([type=radio]):not([type=checkbox]):not([type=submit]),
.demo-form .ff-el-group select,
.demo-form .ff-el-group textarea {
border-radius: 14px;
padding: 14px 16px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
background-color: transparent;
border: 1px solid hsla(0, 0%, 99%, 0.12);
color: rgba(255, 255, 255, 0.78);
}
.demo-form .ff-el-group input:focus,
.demo-form .ff-el-group select:focus {
outline: none;
border-color: var(--action);
}
.demo-form .ff-el-group select option { background-color: #16121f; color: #fff; }
.demo-form .ff-el-input--content:has(> .ff-el-form-check) { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-form .ff-el-form-check { margin: 0; padding: 0; }
.demo-form .ff-el-form-check-label {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 12px;
border: 1px solid hsla(0, 0%, 99%, 0.12);
background-color: rgba(18, 18, 22, 0.6);
color: #94a3b8;
font-size: 13px;
cursor: pointer;
}
.demo-form .ff-el-form-check-label:hover { color: #fff; border-color: #475569; }
.demo-form .ff-el-form-check-label:has(input:checked) {
background-color: rgba(164, 107, 253, 0.1);
border-color: var(--action);
color: #fff;
}
.demo-form .ff-el-form-check-label input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.demo-form .ff-btn-submit { padding: 14px 24px; font-size: 15px; font-weight: 500; }
/* DemoForm: desplegables idénticos entre sí y con el estilo del formulario de contacto */
.demo-form .ff-t-container { display: flex; gap: 16px; }
.demo-form .ff-t-cell { flex: 1 1 0 !important; min-width: 0; }
.demo-form .ff-el-input--content { width: 100%; }
.demo-form .ff-el-group select.ff-el-form-control {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: auto;
font-size: 14px;
line-height: 1.4;
padding: 14px 40px 14px 16px;
color: rgba(255, 255, 255, 0.78);
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
}
.demo-form .ff-el-group select.ff-el-form-control:focus { border-color: var(--action); }
.demo-form .ff-el-group select option {
background-color: #16121f;
color: #ffffff;
padding: 8px 12px;
}
.demo-form .ff-el-group select option:checked,
.demo-form .ff-el-group select option:hover {
background: var(--action) linear-gradient(0deg, var(--action), var(--action));
color: #ffffff;
}
.demo-form .ff-el-datepicker { width: 100%; }
/* DemoForm: "Industria" y "¿Qué te gustaría mejorar?" en filas separadas */
.demo-form [data-name="ff_cn_id_3"] { flex-direction: column; gap: 0; }
.demo-form [data-name="ff_cn_id_3"] .ff-t-cell { flex: none !important; width: 100%; }
/* DemoForm: botón igual que "Enviar mensaje" del formulario de contacto */
.demo-form .ff-btn-submit.ff-btn-submit {
background-color: var(--action);
border-color: var(--action);
color: #ffffff;
border-radius: 100px;
width: 100%;
min-width: 100%;
}
/* Opciones de los desplegables: hover = morado Octopus, seleccionada = morado fuerte del menú */
.oct-select-option:hover { background-color: #A46BFD; color: #ffffff; }
.oct-select-option.is-selected { background-color: #684494; color: #ffffff; }
.oct-select-option.is-selected:hover { background-color: #A46BFD; }
/* DemoForm: calendario propio con bordes redondeados */
.oct-date-wrap { position: relative; }
.demo-form input[data-name="datetime"] {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A46BFD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
}
.oct-date-pop {
display: none;
position: absolute;
left: 0;
top: calc(100% + 6px);
z-index: 40;
width: 280px;
padding: 14px;
background-color: #16121f;
border: 1px solid hsla(0, 0%, 99%, 0.12);
border-radius: 18px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
color: #fff;
}
.oct-date-wrap.is-open .oct-date-pop { display: block; }
.oct-date-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.oct-date-nav { background: none; border: 0; color: #fff; font-size: 20px; width: 30px; height: 30px; border-radius: 10px; cursor: pointer; }
.oct-date-nav:hover { background-color: #A46BFD; }
.oct-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.oct-date-dow { font-size: 11px; color: #94a3b8; padding: 4px 0; }
.oct-date-day { background: none; border: 0; color: rgba(255, 255, 255, 0.85); font-size: 13px; aspect-ratio: 1; border-radius: 10px; cursor: pointer; }
.oct-date-day:hover { background-color: #A46BFD; color: #fff; }
.oct-date-day.is-today { box-shadow: inset 0 0 0 1px #A46BFD; }
.oct-date-day.is-selected { background-color: #684494; color: #fff; }
/* Iconos del hero de servicios: cerca del título y con la misma animación flotante del inicio */
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute {
top: 6%;
left: 15%;
}
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute ~ .brxe-div.absolute {
left: auto;
right: 15%;
}
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute > img {
transform: none;
animation: float-badge-1 6s ease-in-out infinite;
}
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute ~ .brxe-div.absolute > img {
transform: none;
animation: float-badge-2 5.5s ease-in-out infinite;
}
@media (max-width: 900px) {
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute { top: 0; left: 4%; }
main#brx-content .gradiant--black__hero > .brxe-container > .brxe-div.absolute ~ .brxe-div.absolute { left: auto; right: 4%; }
}
/* Logo de Odoo en el certificado (imagen SVG en lugar de texto) */
img.oct-cert-logo-odoo {
display: block;
margin: 0 auto;
height: clamp(4.5rem, 9vw, 7rem);
width: auto;
}
/* "Gold Partners Status" del certificado en dorado (tono del borde del certificado) */
.oct-cert-status-text strong.oct-cert-gold-text {
position: relative;
display: inline-block;
font-size: 1.28em;
font-weight: 800;
color: #C8961E;
background: linear-gradient(110deg, #B8860B 0%, #C8961E 38%, #FFF3B0 50%, #C8961E 62%, #B8860B 100%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: octGoldShine 3.2s linear infinite;
}
/* Destellos: dos estrellitas de cuatro puntas que parpadean en distintos puntos del texto */
.oct-cert-status-text strong.oct-cert-gold-text::before,
.oct-cert-status-text strong.oct-cert-gold-text::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #FFF6C8;
clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
-webkit-text-fill-color: initial;
opacity: 0;
pointer-events: none;
filter: drop-shadow(0 0 3px #FFD700);
}
.oct-cert-status-text strong.oct-cert-gold-text::before {
top: -4px;
left: 18%;
animation: octGoldSpark 2.4s ease-in-out infinite;
}
.oct-cert-status-text strong.oct-cert-gold-text::after {
bottom: -3px;
right: 14%;
width: 8px;
height: 8px;
animation: octGoldSpark 2.4s ease-in-out 1.2s infinite;
}
@keyframes octGoldShine {
0% { background-position: 130% 0; }
100% { background-position: -130% 0; }
}
@keyframes octGoldSpark {
0%, 55%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
70% { opacity: 1; transform: scale(1.1) rotate(45deg); }
85% { opacity: 0; transform: scale(0.4) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
.oct-cert-status-text strong.oct-cert-gold-text,
.oct-cert-status-text strong.oct-cert-gold-text::before,
.oct-cert-status-text strong.oct-cert-gold-text::after { animation: none; }
}
/* Directorio telefónico: Ventas / Soporte (PBX con extensiones subordinadas) */
.oct-info-subtitle,
.oct-info-divider {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
width: 100% !important;
color: rgba(255, 255, 255, 0.45) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
.oct-info-divider {
margin: 0.75rem 0 0.25rem !important;
}
.oct-info-subtitle::after,
.oct-info-divider::after {
content: "" !important;
flex: 1 !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.oct-info-list:has(.oct-info-divider) {
gap: 0.5rem !important;
}
.oct-info-list a.oct-info-row {
text-decoration: none !important;
color: inherit !important;
cursor: pointer !important;
transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.oct-info-list a.oct-info-row:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(164, 107, 253, 0.4) !important;
}
.oct-info-list .oct-info-row.oct-info-row--pbx {
padding: 0.4rem 1.25rem !important;
min-height: 0 !important;
}
.oct-info-list .oct-info-row.oct-info-row--ext {
margin-left: 1.5rem !important;
padding: 0.4rem 1rem !important;
min-height: 0 !important;
}
.oct-info-list .oct-info-row--ext .oct-info-label {
width: 70px !important;
}
/* Encabezados de grupo (Latinoamérica / Resto del mundo) en el select personalizado */
.oct-select-group {
padding: 8px 12px 4px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
cursor: default;
pointer-events: none;
}
.oct-select-group:not(:first-child) {
margin-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 12px;
}
.oct-form-title { font-family: "MuseoSans"; }
/* Banderas en el selector de país */
.oct-flag {
display: inline-block;
width: 20px;
height: 15px;
margin-right: 10px;
border-radius: 2px;
object-fit: cover;
vertical-align: -2px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}