.elementor-81 .elementor-element.elementor-element-227327e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-81 .elementor-element.elementor-element-0e5f3f5{--display:flex;--min-height:74vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.7;}.elementor-81 .elementor-element.elementor-element-0e5f3f5:not(.elementor-motion-effects-element-type-background), .elementor-81 .elementor-element.elementor-element-0e5f3f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://opticavistamar.cl/wp-content/uploads/2026/02/Hero.png");background-repeat:no-repeat;background-size:cover;}.elementor-81 .elementor-element.elementor-element-0e5f3f5::before, .elementor-81 .elementor-element.elementor-element-0e5f3f5 > .elementor-background-video-container::before, .elementor-81 .elementor-element.elementor-element-0e5f3f5 > .e-con-inner > .elementor-background-video-container::before, .elementor-81 .elementor-element.elementor-element-0e5f3f5 > .elementor-background-slideshow::before, .elementor-81 .elementor-element.elementor-element-0e5f3f5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-81 .elementor-element.elementor-element-0e5f3f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#29495C;--background-overlay:'';}.elementor-81 .elementor-element.elementor-element-8a02fd4{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-81 .elementor-element.elementor-element-b827d59 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-accent );}.elementor-81 .elementor-element.elementor-element-dc2a28b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-d6dd000{text-align:center;}.elementor-81 .elementor-element.elementor-element-d6dd000 .elementor-heading-title{color:#FFC845;}.elementor-81 .elementor-element.elementor-element-2e16088{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:10% 10%;--row-gap:10%;--column-gap:10%;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-81 .elementor-element.elementor-element-7793e24 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Roboto", Sans-serif;font-weight:500;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-81 .elementor-element.elementor-element-bf2cbcf.elementor-element{--align-self:flex-start;}.elementor-81 .elementor-element.elementor-element-c550e6d{--display:flex;--min-height:80px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-81 .elementor-element.elementor-element-db52e15{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-81 .elementor-element.elementor-element-2a57aa5 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-2a57aa5 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-81 .elementor-element.elementor-element-2a57aa5{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-81 .elementor-element.elementor-element-2a57aa5 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-81 .elementor-element.elementor-element-2a57aa5 .elementor-icon-list-item > a{font-family:"Roboto", Sans-serif;font-size:19px;font-weight:400;}.elementor-81 .elementor-element.elementor-element-2a57aa5 .elementor-icon-list-text{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-f6692e4 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-f6692e4 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-81 .elementor-element.elementor-element-f6692e4{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-81 .elementor-element.elementor-element-f6692e4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-81 .elementor-element.elementor-element-f6692e4 .elementor-icon-list-item > a{font-family:"Roboto", Sans-serif;font-size:19px;font-weight:400;}.elementor-81 .elementor-element.elementor-element-f6692e4 .elementor-icon-list-text{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-0af18e1 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-0af18e1 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-81 .elementor-element.elementor-element-0af18e1{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-81 .elementor-element.elementor-element-0af18e1 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-81 .elementor-element.elementor-element-0af18e1 .elementor-icon-list-item > a{font-family:"Roboto", Sans-serif;font-size:19px;font-weight:400;}.elementor-81 .elementor-element.elementor-element-0af18e1 .elementor-icon-list-text{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-af863fc .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-af863fc .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-81 .elementor-element.elementor-element-af863fc{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-81 .elementor-element.elementor-element-af863fc .elementor-icon-list-item > .elementor-icon-list-text, .elementor-81 .elementor-element.elementor-element-af863fc .elementor-icon-list-item > a{font-family:"Roboto", Sans-serif;font-size:19px;font-weight:400;}.elementor-81 .elementor-element.elementor-element-af863fc .elementor-icon-list-text{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-e594ae1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-81 .elementor-element.elementor-element-bf769a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-2ac9917{text-align:center;}.elementor-81 .elementor-element.elementor-element-609bf98{text-align:center;}.elementor-81 .elementor-element.elementor-element-609bf98 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-text );}.elementor-81 .elementor-element.elementor-element-bb880c2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-8c1c4da{--display:flex;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-81 .elementor-element.elementor-element-0ced458 .elementor-icon-wrapper{text-align:center;}.elementor-81 .elementor-element.elementor-element-e7fe771{text-align:center;}.elementor-81 .elementor-element.elementor-element-1ed6859{text-align:center;}.elementor-81 .elementor-element.elementor-element-d578c0a{--display:flex;}.elementor-81 .elementor-element.elementor-element-01d42e6 .elementor-icon-wrapper{text-align:center;}.elementor-81 .elementor-element.elementor-element-35ba3b0{text-align:center;}.elementor-81 .elementor-element.elementor-element-3496d3d{text-align:center;}.elementor-81 .elementor-element.elementor-element-f8e4f97{--display:flex;}.elementor-81 .elementor-element.elementor-element-6de45e1 .elementor-icon-wrapper{text-align:center;}.elementor-81 .elementor-element.elementor-element-dad82f2{text-align:center;}.elementor-81 .elementor-element.elementor-element-f08739b{text-align:center;}.elementor-81 .elementor-element.elementor-element-6fa223a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-0e931ea{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overlay-opacity:1;}.elementor-81 .elementor-element.elementor-element-0e931ea::before, .elementor-81 .elementor-element.elementor-element-0e931ea > .elementor-background-video-container::before, .elementor-81 .elementor-element.elementor-element-0e931ea > .e-con-inner > .elementor-background-video-container::before, .elementor-81 .elementor-element.elementor-element-0e931ea > .elementor-background-slideshow::before, .elementor-81 .elementor-element.elementor-element-0e931ea > .e-con-inner > .elementor-background-slideshow::before, .elementor-81 .elementor-element.elementor-element-0e931ea > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-81 .elementor-element.elementor-element-e83ea39{--display:flex;}.elementor-81 .elementor-element.elementor-element-58e15c0 .elementor-heading-title{color:#FFFFFF;}.elementor-81 .elementor-element.elementor-element-2f3cf84 .elementor-heading-title{color:#FFFFFFB3;}.elementor-81 .elementor-element.elementor-element-3ab653a .elementor-button{font-family:"Roboto", Sans-serif;font-weight:500;}.elementor-81 .elementor-element.elementor-element-97a5453{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-81 .elementor-element.elementor-element-ac9d18b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-448fa33{--display:flex;}.elementor-81 .elementor-element.elementor-element-10248aa{text-align:center;}.elementor-81 .elementor-element.elementor-element-4e0e7cc{--swiper-slides-to-display:4;--swiper-slides-gap:10px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:7px 7px 3px 7px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;}.elementor-81 .elementor-element.elementor-element-4e0e7cc .swiper-slide > .elementor-element{height:100%;}.elementor-81 .elementor-element.elementor-element-dc02929{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-e687e0d{--display:flex;--min-height:40vh;--justify-content:center;}.elementor-81 .elementor-element.elementor-element-9fcc114{text-align:center;}.elementor-81 .elementor-element.elementor-element-56bee2c{width:initial;max-width:initial;text-align:center;}.elementor-81 .elementor-element.elementor-element-b64e568{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-4f72059{--display:flex;}.elementor-81 .elementor-element.elementor-element-4f72059:not(.elementor-motion-effects-element-type-background), .elementor-81 .elementor-element.elementor-element-4f72059 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#29495CE6;}.elementor-81 .elementor-element.elementor-element-84d361d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-81 .elementor-element.elementor-element-b6ac88d .elementor-icon-wrapper{text-align:center;}.elementor-81 .elementor-element.elementor-element-709f12f.elementor-element{--align-self:center;}.elementor-81 .elementor-element.elementor-element-709f12f .elementor-heading-title{color:#FFFFFF;}.elementor-widget-testimonial-carousel .elementor-testimonial__text{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-testimonial-carousel .elementor-testimonial__name{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-testimonial-carousel .elementor-testimonial__title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-81 .elementor-element.elementor-element-4e6bb5e .swiper-pagination-bullet-active, .elementor-81 .elementor-element.elementor-element-4e6bb5e .swiper-pagination-progressbar-fill{background-color:#FFC845;}.elementor-81 .elementor-element.elementor-element-4e6bb5e .swiper-pagination-fraction{color:#FFC845;}.elementor-81 .elementor-element.elementor-element-4e6bb5e.elementor-arrows-yes .elementor-main-swiper{width:calc( 100% - 40px );}.elementor-81 .elementor-element.elementor-element-4e6bb5e .elementor-main-swiper{width:100%;}.elementor-81 .elementor-element.elementor-element-4e6bb5e .elementor-swiper-button{font-size:20px;}.elementor-81 .elementor-element.elementor-element-4e6bb5e .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background-color:#FFFFFF;opacity:1;}.elementor-81 .elementor-element.elementor-element-4e6bb5e .elementor-testimonial__text{color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:20px;font-weight:400;font-style:italic;-webkit-text-stroke-color:#000;stroke:#000;}.elementor-81 .elementor-element.elementor-element-4e6bb5e .elementor-testimonial__name{color:#FFC845;font-family:"Roboto", Sans-serif;font-weight:700;}.elementor-81 .elementor-element.elementor-element-ba509db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-59b7a36{--display:flex;}.elementor-81 .elementor-element.elementor-element-32f54aa{text-align:center;}.elementor-81 .elementor-element.elementor-element-f8ce9a0{--e-image-carousel-slides-to-show:6;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-81 .elementor-element.elementor-element-f8ce9a0 .swiper-wrapper{display:flex;align-items:center;}.elementor-81 .elementor-element.elementor-element-a0ddf35{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:142px;--margin-left:0px;--margin-right:0px;}.elementor-81 .elementor-element.elementor-element-a552162{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-81 .elementor-element.elementor-element-a552162.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-81 .elementor-element.elementor-element-c42a544{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-81 .elementor-element.elementor-element-59306c2{margin:19px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:24px;--icon-vertical-align:flex-start;--icon-vertical-offset:0px;}.elementor-81 .elementor-element.elementor-element-59306c2 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(14px/2);}.elementor-81 .elementor-element.elementor-element-59306c2 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(14px/2);}.elementor-81 .elementor-element.elementor-element-59306c2 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(14px/2);}.elementor-81 .elementor-element.elementor-element-59306c2 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-14px/2);}.elementor-81 .elementor-element.elementor-element-59306c2 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-14px/2);}.elementor-81 .elementor-element.elementor-element-59306c2 .elementor-icon-list-icon i{color:#004C78;transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-59306c2 .elementor-icon-list-icon svg{fill:#004C78;transition:fill 0.3s;}.elementor-81 .elementor-element.elementor-element-59306c2 .elementor-icon-list-text{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-e55b12b{margin:11px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-81 .elementor-element.elementor-element-e55b12b .elementor-icon-list-item:not(:last-child):after{content:"";border-color:#ddd;}.elementor-81 .elementor-element.elementor-element-e55b12b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after{border-block-start-style:solid;border-block-start-width:1px;}.elementor-81 .elementor-element.elementor-element-e55b12b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after{border-inline-start-style:solid;}.elementor-81 .elementor-element.elementor-element-e55b12b .elementor-inline-items .elementor-icon-list-item:not(:last-child):after{border-inline-start-width:1px;}.elementor-81 .elementor-element.elementor-element-e55b12b .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-e55b12b .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-81 .elementor-element.elementor-element-e55b12b .elementor-icon-list-item > .elementor-icon-list-text, .elementor-81 .elementor-element.elementor-element-e55b12b .elementor-icon-list-item > a{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:400;}.elementor-81 .elementor-element.elementor-element-e55b12b .elementor-icon-list-text{transition:color 0.3s;}.elementor-81 .elementor-element.elementor-element-e728f8a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-783ad89{border-radius:15px 15px 15px 15px;}.elementor-81 .elementor-element.elementor-element-783ad89 iframe{height:344px;}.elementor-81 .elementor-element.elementor-element-4dfcd29{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:-0px;--margin-left:0px;--margin-right:0px;}.elementor-81 .elementor-element.elementor-element-31b7b94{--display:flex;}.elementor-81 .elementor-element.elementor-element-2e2b42e .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:#FFFFFF;}.elementor-81 .elementor-element.elementor-element-39bda10 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:#6EC1E4;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-81 .elementor-element.elementor-element-8a02fd4{--width:61%;}.elementor-81 .elementor-element.elementor-element-bf769a9{--width:100%;}.elementor-81 .elementor-element.elementor-element-a552162{--width:40%;}.elementor-81 .elementor-element.elementor-element-e728f8a{--width:60%;}}@media(max-width:1024px){.elementor-81 .elementor-element.elementor-element-4e0e7cc{--swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-81 .elementor-element.elementor-element-4e0e7cc{--swiper-slides-to-display:1;}}/* Start custom CSS for container, class: .elementor-element-8a02fd4 */@keyframes enfoque {
  0%   { filter: blur(4px); opacity: 0.7; }
  100% { filter: blur(0);   opacity: 1;   }
}
.hero-title {
  animation: enfoque 1.2s ease-out forwards;
}/* End custom CSS */
/* Start custom CSS for image-carousel, class: .elementor-element-f8ce9a0 *//*.logos-marcas img {
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.logos-marcas img:hover {
    filter: grayscale(0);
    opacity: 1;
}*//* End custom CSS */
/* Start custom CSS *//* ============================================================
   🎨 TEMA ÓPTICA — CSS PERSONALIZADO PARA ELEMENTOR PRO
   ============================================================
   
   INSTRUCCIONES DE USO:
   ─────────────────────
   Este archivo está dividido en MÓDULOS independientes.
   Puedes copiar TODO en Elementor > Custom CSS global,
   o copiar solo los módulos que necesites en cada widget/sección.
   
   DÓNDE PEGAR EN ELEMENTOR:
   
   1) CSS GLOBAL (aplica a toda la web):
      WordPress Admin → Apariencia → Personalizar → CSS Adicional
      O bien: Elementor → Hamburguesa (☰) → Ajustes del sitio → CSS personalizado
   
   2) CSS POR PÁGINA:
      Dentro del editor de Elementor → Hamburguesa (☰) → Ajustes de página → Avanzado → CSS personalizado
   
   3) CSS POR SECCIÓN/WIDGET:
      Click en la sección o widget → Pestaña "Avanzado" → Custom CSS
      NOTA: En este nivel, usa "body.elementor-page-81" en lugar del body.elementor-page-81 real.
      Ejemplo: body.elementor-page-81 .mi-clase { color: red; }
   
   ============================================================ */


/* ============================================================
   MÓDULO 1: VARIABLES CSS (ROOT)
   ─────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Define los colores como variables reutilizables.
      Si algún día cambia un color, lo cambias SOLO aquí.
   ============================================================ */

:root {
    /* Paleta principal */
    --azul-profundo: #004C78;
    --turquesa: #00A6C2;
    --amarillo: #FFC845;
    --blanco: #FFFFFF;
    --gris-suave: #e9e8e8;

    /* Variantes de uso */
    --texto-principal: #004C78;
    --texto-body: rgba(0, 76, 120, 0.85);    /* Azul profundo al 85% */
    --texto-sobre-oscuro: #FFFFFF;
    --texto-sobre-amarillo: #004C78;
    --texto-secundario: #999999;
    --error: #E74C3C;
    --exito: #27AE60;

    /* Sombras */
    --sombra-card: 0 2px 12px rgba(0, 76, 120, 0.08);
    --sombra-card-hover: 0 8px 30px rgba(0, 76, 120, 0.15);
    --sombra-boton: 0 4px 15px rgba(255, 200, 69, 0.4);

    /* Transiciones */
    --transicion: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transicion-rapida: all 0.2s ease;

    /* Bordes */
    --radio-boton: 50px;      /* Botones pill / redondeados */
    --radio-card: 12px;
    --radio-input: 8px;

    /* Tipografía base */
    --font-heading: 'Montserrat', sans-serif;   /* Cambiar si usas otra */
    --font-body: 'Open Sans', sans-serif;        /* Cambiar si usas otra */
}


/* ============================================================
   MÓDULO 2: RESET Y BASE
   ─────────────────────
   📍 PEGAR EN: CSS Global
   📝 Estilos base del body, tipografía general,
      selección de texto, scrollbar.
   ============================================================ */

body {
    background-color: var(--blanco);
    color: var(--texto-body);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selección de texto personalizada */
::selection {
    background-color: var(--turquesa);
    color: var(--blanco);
}

::-moz-selection {
    background-color: var(--turquesa);
    color: var(--blanco);
}

/* Scrollbar personalizado (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gris-suave);
}

::-webkit-scrollbar-thumb {
    background: var(--turquesa);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--azul-profundo);
}

/* Scrollbar Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--turquesa) var(--gris-suave);
}


/* ============================================================
   MÓDULO 3: TIPOGRAFÍA — HEADINGS
   ────────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Controla el color y estilo de todos los títulos.
      Elementor permite override por widget, así que estos
      son los defaults globales.
   ============================================================ */

h1, .elementor-heading-title.elementor-size-xxl {
    color: var(--azul-profundo);
    font-family: var(--font-heading);
    font-weight: 700;
}

h2, .elementor-heading-title.elementor-size-xl {
    color: var(--turquesa);
    font-family: var(--font-heading);
    font-weight: 700;
}

h3, h4,
.elementor-heading-title.elementor-size-large,
.elementor-heading-title.elementor-size-medium {
    color: var(--azul-profundo);
    font-family: var(--font-heading);
    font-weight: 600;
}

h5, h6,
.elementor-heading-title.elementor-size-small {
    color: var(--turquesa);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85em;
}

/* Línea decorativa bajo h2 (usa clase personalizada) */
.titulo-con-linea {
    position: relative;
    padding-bottom: 15px;
}

.titulo-con-linea::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--amarillo);
    border-radius: 2px;
}

/* Versión centrada */
.titulo-con-linea-center {
    position: relative;
    padding-bottom: 15px;
    text-align: center;
}

.titulo-con-linea-center::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--amarillo);
    border-radius: 2px;
}


/* ============================================================
   MÓDULO 4: ENLACES
   ─────────────────
   📍 PEGAR EN: CSS Global
   📝 Links en texto general. El hover amarillo es el
      "destello de lente" que hace memorable la interacción.
   ============================================================ */

a {
    color: var(--turquesa);
    text-decoration: none;
    transition: var(--transicion-rapida);
}

a:hover {
    color: var(--amarillo);
}

/* Links sobre fondo oscuro */
.fondo-oscuro a,
.fondo-azul a {
    color: var(--blanco);
}

.fondo-oscuro a:hover,
.fondo-azul a:hover {
    color: var(--amarillo);
}


/* ============================================================
   MÓDULO 5: BOTONES (CORREGIDO)
   ─────────────────
   📍 PEGAR EN: CSS Global
   📝 Selectores corregidos para la estructura real de Elementor.
      La clase se aplica al wrapper (.elementor-widget-button)
      pero los estilos deben llegar al <a> interno.
   ============================================================ */

/* ----- BOTÓN PRIMARIO ----- */
.btn-primario .elementor-button {
    background-color: var(--amarillo) !important;
    color: var(--azul-profundo) !important;
    border: 2px solid var(--amarillo) !important;
    border-radius: var(--radio-boton) !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    transition: var(--transicion) !important;
    position: relative;
    overflow: hidden;
}

.btn-primario .elementor-button:hover {
    background-color: var(--azul-profundo) !important;
    color: var(--blanco) !important;
    border-color: var(--azul-profundo) !important;
    box-shadow: var(--sombra-boton) !important;
    transform: translateY(-2px);
}

/* ----- BOTÓN SECUNDARIO (ghost) ----- */
.btn-secundario .elementor-button {
    background-color: transparent !important;
    color: var(--turquesa) !important;
    border: 2px solid var(--turquesa) !important;
    border-radius: var(--radio-boton) !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    transition: var(--transicion) !important;
}

.btn-secundario .elementor-button:hover {
    background-color: var(--turquesa) !important;
    color: var(--blanco) !important;
    transform: translateY(-2px);
}

/* ----- BOTÓN SOBRE FONDO OSCURO ----- */
.btn-sobre-oscuro .elementor-button,
.btn-sobre-oscuro .elementor-button .elementor-button-text,
.btn-sobre-oscuro .elementor-button .elementor-button-icon {
    background-color: var(--amarillo) !important;
    color: var(--azul-profundo) !important;
    border: 2px solid var(--amarillo) !important;
    border-radius: var(--radio-boton) !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    transition: var(--transicion) !important;
}

.btn-sobre-oscuro .elementor-button .elementor-button-text,
.btn-sobre-oscuro .elementor-button .elementor-button-icon {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.btn-sobre-oscuro .elementor-button:hover,
.btn-sobre-oscuro .elementor-button:hover .elementor-button-text,
.btn-sobre-oscuro .elementor-button:hover .elementor-button-icon {
    background-color: var(--blanco) !important;
    color: var(--azul-profundo) !important;
    border-color: var(--blanco) !important;
}

.btn-sobre-oscuro .elementor-button:hover .elementor-button-text,
.btn-sobre-oscuro .elementor-button:hover .elementor-button-icon {
    background: none !important;
    border: none !important;
}

/* ----- BOTÓN PEQUEÑO ----- */
.btn-small .elementor-button {
    padding: 8px 20px !important;
    font-size: 12px !important;
}

/* ----- LIMPIAR WRAPPER -----
   Esto asegura que el div contenedor no herede
   estilos visuales que crean el efecto doble */
.btn-primario,
.btn-secundario,
.btn-sobre-oscuro {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   MÓDULO 6: HEADER / NAVEGACIÓN
   ──────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Estilos para el header con Elementor Pro Header Builder.
      Si usas el header del tema, puede necesitar ajustes.
   ============================================================ */

/* Fondo del header */
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .e-con {
    background-color: var(--azul-profundo) !important;
}

/* Links de navegación */
.elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu a {
    color: var(--blanco) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: var(--transicion-rapida) !important;
    position: relative;
}

/* Hover del nav: destello amarillo */
.elementor-nav-menu a:hover,
.elementor-nav-menu .elementor-item:hover {
    color: var(--amarillo) !important;
}

/* Link activo */
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .current-menu-item > a {
    color: var(--amarillo) !important;
}

/* Indicador de página activa (línea bajo el link) */
.elementor-nav-menu .elementor-item.elementor-item-active::after,
.elementor-nav-menu .current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--amarillo);
    border-radius: 1px;
}

/* Header sticky con transparencia */
.header-sticky {
    transition: var(--transicion) !important;
}

.header-sticky.elementor-sticky--active {
    background-color: rgba(0, 76, 120, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Menú móvil hamburguesa */
.elementor-menu-toggle {
    color: var(--blanco) !important;
}

.elementor-menu-toggle:hover {
    color: var(--amarillo) !important;
}

/* Dropdown del menú mobile */
.elementor-nav-menu--dropdown {
    background-color: var(--azul-profundo) !important;
    border-top: 3px solid var(--amarillo) !important;
}


/* ============================================================
   MÓDULO 7: SECCIONES DE FONDO
   ─────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Clases para asignar a secciones de Elementor.
      En Elementor: Sección → Avanzado → CSS Classes
   ============================================================ */

/* Fondo blanco (default) */
.fondo-blanco {
    background-color: var(--blanco) !important;
}

/* Fondo gris suave (secciones alternas) */
.fondo-gris {
    background-color: var(--gris-suave) !important;
}

/* Fondo azul profundo */
.fondo-azul {
    background-color: var(--azul-profundo) !important;
}

.fondo-azul h1, .fondo-azul h2, .fondo-azul h3,
.fondo-azul h4, .fondo-azul h5, .fondo-azul h6,
.fondo-azul p, .fondo-azul span, .fondo-azul li {
    color: var(--blanco) !important;
}

.fondo-azul h2 {
    color: var(--blanco) !important;
}

/* Fondo turquesa (testimonios, CTAs) */
.fondo-turquesa {
    background-color: var(--turquesa) !important;
}

.fondo-turquesa h1, .fondo-turquesa h2, .fondo-turquesa h3,
.fondo-turquesa h4, .fondo-turquesa p, .fondo-turquesa span {
    color: var(--blanco) !important;
}

/* Fondo amarillo (banners de oferta) */
.fondo-amarillo {
    background-color: var(--amarillo) !important;
}

.fondo-amarillo h1, .fondo-amarillo h2, .fondo-amarillo h3,
.fondo-amarillo h4, .fondo-amarillo p, .fondo-amarillo span {
    color: var(--azul-profundo) !important;
}

/* Overlay azul profundo sobre imagen (para hero) */
.hero-overlay {
    position: relative;
}

.hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 76, 120, 0.80);
    z-index: 1;
}

.hero-overlay > .elementor-container,
.hero-overlay > .e-con-inner {
    position: relative;
    z-index: 2;
}


/* ============================================================
   MÓDULO 8: CARDS DE PRODUCTOS / SERVICIOS
   ─────────────────────────────────────────
   📍 PEGAR EN: CSS Global o en sección específica
   📝 Aplica a contenedores de Elementor con la clase asignada.
      En Elementor: Container/Columna → Avanzado → CSS Classes
   ============================================================ */

.card-producto {
    background: var(--blanco);
    border: 1px solid var(--gris-suave);
    border-radius: var(--radio-card);
    padding: 0;
    overflow: hidden;
    transition: var(--transicion);
    box-shadow: var(--sombra-card);
}

.card-producto:hover {
    border-color: var(--turquesa);
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-5px);
}

/* Card de servicio (exámenes, consultas) */
.card-servicio {
    background: var(--blanco);
    border: 1px solid var(--gris-suave);
    border-radius: var(--radio-card);
    padding: 30px;
    text-align: center;
    transition: var(--transicion);
    position: relative;
    overflow: hidden;
}

.card-servicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--turquesa);
    transform: scaleX(0);
    transition: var(--transicion);
}

.card-servicio:hover {
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-5px);
}

.card-servicio:hover::before {
    transform: scaleX(1);
}

/* Icono dentro de card de servicio */
.card-servicio .elementor-icon {
    color: var(--turquesa) !important;
    font-size: 48px !important;
    margin-bottom: 15px;
    transition: var(--transicion);
}

.card-servicio:hover .elementor-icon {
    color: var(--amarillo) !important;
    transform: scale(1.1);
}


/* ============================================================
   MÓDULO 9: BADGES Y ETIQUETAS
   ─────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Pequeñas etiquetas para marcar productos o servicios.
      Usar en un widget de texto con la clase asignada.
   ============================================================ */

.badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-heading);
}

.badge-nuevo {
    background-color: var(--amarillo);
    color: var(--azul-profundo);
}

.badge-popular {
    background-color: var(--turquesa);
    color: var(--blanco);
}

.badge-oferta {
    background-color: var(--azul-profundo);
    color: var(--amarillo);
}


/* ============================================================
   MÓDULO 10: FORMULARIOS
   ──────────────────────
   📍 PEGAR EN: CSS Global
   📝 Aplica a formularios de Elementor Forms.
      El borde turquesa en focus indica "el ojo se enfoca".
   ============================================================ */

/* Inputs y textareas */
.elementor-field-textual,
.elementor-field-textual input,
.elementor-field-textual textarea,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
    border: 2px solid var(--gris-suave) !important;
    border-radius: var(--radio-input) !important;
    padding: 12px 16px !important;
    font-family: var(--font-body) !important;
    color: var(--texto-principal) !important;
    background: var(--blanco) !important;
    transition: var(--transicion-rapida) !important;
    font-size: 15px !important;
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
    border-color: var(--turquesa) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 194, 0.15) !important;
}

/* Placeholder */
.elementor-field-group input::placeholder,
.elementor-field-group textarea::placeholder {
    color: var(--texto-secundario) !important;
    font-style: italic;
}

/* Labels */
.elementor-field-label {
    color: var(--azul-profundo) !important;
    font-weight: 600 !important;
    font-family: var(--font-heading) !important;
    margin-bottom: 6px !important;
}

/* Botón submit del formulario */
.elementor-button[type="submit"],
.elementor-field-group .elementor-button {
    background-color: var(--amarillo) !important;
    color: var(--azul-profundo) !important;
    border: none !important;
    border-radius: var(--radio-boton) !important;
    padding: 14px 40px !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: var(--transicion) !important;
}

.elementor-button[type="submit"]:hover,
.elementor-field-group .elementor-button:hover {
    background-color: var(--azul-profundo) !important;
    color: var(--blanco) !important;
}

/* Mensajes de error */
.elementor-message.elementor-message-danger {
    color: var(--error) !important;
}

/* Mensaje de éxito */
.elementor-message.elementor-message-success {
    color: var(--exito) !important;
}


/* ============================================================
   MÓDULO 11: FOOTER
   ─────────────────
   📍 PEGAR EN: CSS Global
   📝 Footer con el mismo azul profundo del header.
      Consistencia visual que "enmarca" la página.
   ============================================================ */

.elementor-location-footer .elementor-section,
.elementor-location-footer .e-con {
    background-color: var(--azul-profundo) !important;
}

.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6 {
    color: var(--blanco) !important;
}

.elementor-location-footer p,
.elementor-location-footer span,
.elementor-location-footer li {
    color: rgba(255, 255, 255, 0.75) !important;
}

.elementor-location-footer a {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: var(--transicion-rapida);
}

.elementor-location-footer a:hover {
    color: var(--amarillo) !important;
}

/* Iconos sociales en footer */
.elementor-location-footer .elementor-social-icon {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--blanco) !important;
    transition: var(--transicion) !important;
}

.elementor-location-footer .elementor-social-icon:hover {
    background-color: var(--amarillo) !important;
    color: var(--azul-profundo) !important;
}

/* Línea divisora en footer */
.elementor-location-footer .elementor-divider-separator {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Barra inferior de copyright */
.footer-copyright {
    background-color: rgba(0, 0, 0, 0.15) !important;
    padding: 15px 0 !important;
}

.footer-copyright p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}


/* ============================================================
   MÓDULO 12: TESTIMONIOS
   ──────────────────────
   📍 PEGAR EN: CSS de la sección de testimonios
   📝 Usa clase "seccion-testimonios" en la sección.
      Fondo turquesa con citas en blanco.
   ============================================================ */

.seccion-testimonios {
    background-color: var(--turquesa) !important;
    position: relative;
}

.seccion-testimonios .elementor-testimonial-content {
    color: var(--blanco) !important;
    font-size: 18px !important;
    font-style: italic !important;
    line-height: 1.7 !important;
}

.seccion-testimonios .elementor-testimonial-name {
    color: var(--amarillo) !important;
    font-weight: 700 !important;
}

.seccion-testimonios .elementor-testimonial-job {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Comillas decorativas */
.seccion-testimonios .elementor-testimonial-wrapper::before {
    content: '"';
    font-size: 120px;
    color: rgba(255, 255, 255, 0.15);
    font-family: Georgia, serif;
    position: absolute;
    top: -20px;
    left: 20px;
    line-height: 1;
}


/* ============================================================
   MÓDULO 13: BLOCKQUOTES / CITAS
   ──────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Citas con borde amarillo — el "hallazgo visual".
   ============================================================ */

blockquote,
.elementor-blockquote__content {
    border-left: 4px solid var(--amarillo) !important;
    padding: 20px 25px !important;
    margin: 20px 0 !important;
    background: rgba(255, 200, 69, 0.05);
    border-radius: 0 var(--radio-input) var(--radio-input) 0;
    color: var(--azul-profundo) !important;
    font-style: italic;
    font-size: 1.1em;
}


/* ============================================================
   MÓDULO 14: DIVIDERS / SEPARADORES
   ──────────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Líneas limpias que no distraen.
   ============================================================ */

hr,
.elementor-divider-separator {
    border-color: var(--gris-suave) !important;
}

/* Divider decorativo con acento */
.divider-acento .elementor-divider-separator {
    border-color: var(--turquesa) !important;
    border-width: 2px !important;
    width: 60px !important;
}


/* ============================================================
   MÓDULO 15: BANNER DE OFERTAS
   ────────────────────────────
   📍 PEGAR EN: CSS de la sección del banner
   📝 Usa clase "banner-oferta" en la sección.
      Franja amarilla llamativa para promociones.
   ============================================================ */

.banner-oferta {
    background-color: var(--amarillo) !important;
    padding: 20px 0 !important;
}

.banner-oferta h2,
.banner-oferta h3,
.banner-oferta p {
    color: var(--azul-profundo) !important;
    margin: 0 !important;
}

.banner-oferta .elementor-button {
    background-color: var(--azul-profundo) !important;
    color: var(--blanco) !important;
    border-radius: var(--radio-boton) !important;
}

.banner-oferta .elementor-button:hover {
    background-color: var(--blanco) !important;
    color: var(--azul-profundo) !important;
}


/* ============================================================
   MÓDULO 16: ANIMACIONES Y EFECTOS
   ─────────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Micro-interacciones que dan vida a la web.
      Efecto "destello" en elementos clave.
   ============================================================ */

/* Efecto brillo/destello en botones primarios */
.btn-primario .elementor-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.btn-primario .elementor-button:hover::after {
    left: 100%;
}

/* Efecto pulse para elementos de atención */
@keyframes pulse-turquesa {
    0% { box-shadow: 0 0 0 0 rgba(0, 166, 194, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 166, 194, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 166, 194, 0); }
}

.pulse {
    animation: pulse-turquesa 2s infinite;
}

/* Fade in al hacer scroll (se activa con Elementor Motion Effects) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}


/* ============================================================
   MÓDULO 17: RESPONSIVE
   ─────────────────────
   📍 PEGAR EN: CSS Global
   📝 Ajustes para móvil y tablet.
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .card-servicio {
        padding: 20px;
    }
    
    .btn-primario,
    .btn-secundario {
        padding: 12px 28px !important;
        font-size: 13px !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    h1 {
        font-size: 28px !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    .btn-primario,
    .btn-secundario {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
    }
    
    .card-producto,
    .card-servicio {
        margin-bottom: 20px;
    }

    /* En móvil, el sticky no tiene blur (performance) */
    .header-sticky.elementor-sticky--active {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--azul-profundo) !important;
    }
}


/* ============================================================
   MÓDULO 18: UTILIDADES RÁPIDAS
   ─────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Clases de utilidad para aplicar rápidamente en Elementor.
      Sección/Widget → Avanzado → CSS Classes
   ============================================================ */

/* Colores de texto */
.texto-azul { color: var(--azul-profundo) !important; }
.texto-turquesa { color: var(--turquesa) !important; }
.texto-amarillo { color: var(--amarillo) !important; }
.texto-blanco { color: var(--blanco) !important; }
.texto-gris { color: var(--texto-secundario) !important; }

/* Fondos */
.bg-azul { background-color: var(--azul-profundo) !important; }
.bg-turquesa { background-color: var(--turquesa) !important; }
.bg-amarillo { background-color: var(--amarillo) !important; }
.bg-blanco { background-color: var(--blanco) !important; }
.bg-gris { background-color: var(--gris-suave) !important; }

/* Bordes */
.borde-turquesa { border: 2px solid var(--turquesa) !important; }
.borde-amarillo { border: 2px solid var(--amarillo) !important; }
.borde-gris { border: 1px solid var(--gris-suave) !important; }

/* Sombras */
.con-sombra { box-shadow: var(--sombra-card) !important; }
.con-sombra-fuerte { box-shadow: var(--sombra-card-hover) !important; }

/* Bordes redondeados */
.redondeado { border-radius: var(--radio-card) !important; }
.redondeado-full { border-radius: 50px !important; }
.redondeado-circulo { border-radius: 50% !important; }/* End custom CSS */