.elementor-23 .elementor-element.elementor-element-1ca9f9e{--display:flex;--min-height:517px;--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:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:1;}.elementor-23 .elementor-element.elementor-element-1ca9f9e:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-1ca9f9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://yourwayclean.com/wp-content/uploads/2026/09/ChatGPT-Image-7-sept-2026-09_51_03-6.png");background-position:center center;background-size:cover;}.elementor-23 .elementor-element.elementor-element-1ca9f9e::before, .elementor-23 .elementor-element.elementor-element-1ca9f9e > .elementor-background-video-container::before, .elementor-23 .elementor-element.elementor-element-1ca9f9e > .e-con-inner > .elementor-background-video-container::before, .elementor-23 .elementor-element.elementor-element-1ca9f9e > .elementor-background-slideshow::before, .elementor-23 .elementor-element.elementor-element-1ca9f9e > .e-con-inner > .elementor-background-slideshow::before, .elementor-23 .elementor-element.elementor-element-1ca9f9e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(70deg, var( --e-global-color-astglobalcolor4 ) 36%, #F2295B00 47%);}.elementor-23 .elementor-element.elementor-element-677a4a6{--display:flex;}.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-23 .elementor-element.elementor-element-ac7567e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;}.elementor-23 .elementor-element.elementor-element-69b9d99 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:53px;font-weight:600;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-aed8279{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:400;}.elementor-23 .elementor-element.elementor-element-3d49007{--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-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
.elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-23 .elementor-element.elementor-element-f484dd0 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-f484dd0.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-f484dd0.elementor-view-framed .elementor-icon, .elementor-23 .elementor-element.elementor-element-f484dd0.elementor-view-default .elementor-icon{fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-db696da .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-41d39b7 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-41d39b7.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-41d39b7.elementor-view-framed .elementor-icon, .elementor-23 .elementor-element.elementor-element-41d39b7.elementor-view-default .elementor-icon{fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-1b17159{--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 22px;--row-gap:0px;--column-gap:22px;}.elementor-23 .elementor-element.elementor-element-5a5014d{--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-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-23 .elementor-element.elementor-element-06530fe{--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-23 .elementor-element.elementor-element-9c8a397 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;}.elementor-23 .elementor-element.elementor-element-cdf778c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:51px;font-weight:600;}.elementor-23 .elementor-element.elementor-element-01d2e86{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:400;}.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-23 .elementor-element.elementor-element-39ebd91 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-23 .elementor-element.elementor-element-39ebd91 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-23 .elementor-element.elementor-element-39ebd91{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-23 .elementor-element.elementor-element-39ebd91 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-23 .elementor-element.elementor-element-39ebd91 .elementor-icon-list-item > a{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:400;}.elementor-23 .elementor-element.elementor-element-39ebd91 .elementor-icon-list-text{transition:color 0.3s;}.elementor-23 .elementor-element.elementor-element-33a8a71{--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-23 .elementor-element.elementor-element-e856ad6{--display:flex;}.elementor-23 .elementor-element.elementor-element-29e3ac6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:28px;font-weight:600;}.elementor-23 .elementor-element.elementor-element-e4f7fd5.elementor-element{--align-self:center;}.elementor-23 .elementor-element.elementor-element-e4f7fd5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:51px;font-weight:600;}.elementor-23 .elementor-element.elementor-element-b4bdbe5{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:center;}.elementor-23 .elementor-element.elementor-element-b4bdbe5.elementor-element{--align-self:center;}.elementor-23 .elementor-element.elementor-element-b4bdbe5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:51px;font-weight:600;}.elementor-23 .elementor-element.elementor-element-ec908ba{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-23 .elementor-element.elementor-element-65f1c5b .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-65f1c5b.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-65f1c5b.elementor-view-framed .elementor-icon, .elementor-23 .elementor-element.elementor-element-65f1c5b.elementor-view-default .elementor-icon{fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-786e768 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-c2b4ef3 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-c2b4ef3.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-c2b4ef3.elementor-view-framed .elementor-icon, .elementor-23 .elementor-element.elementor-element-c2b4ef3.elementor-view-default .elementor-icon{fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-f566e1f{--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-23 .elementor-element.elementor-element-afdd0c9{--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-23 .elementor-element.elementor-element-bc3d7ef{--display:flex;}.elementor-23 .elementor-element.elementor-element-bc3d7ef.e-con{--order:-99999 /* order start hack */;}.elementor-23 .elementor-element.elementor-element-ececcbc .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-23 .elementor-element.elementor-element-ececcbc .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-23 .elementor-element.elementor-element-ececcbc{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-23 .elementor-element.elementor-element-ececcbc .elementor-icon-list-text{transition:color 0.3s;}.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-23 .elementor-element.elementor-element-21cab0a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-23 .elementor-element.elementor-element-80be636{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-23 .elementor-element.elementor-element-0984686{--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-23 .elementor-element.elementor-element-b537d6c .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-b537d6c .elementor-icon-box-title, .elementor-23 .elementor-element.elementor-element-b537d6c .elementor-icon-box-title a{font-family:"Roboto", Sans-serif;font-size:1px;font-weight:600;}.elementor-23 .elementor-element.elementor-element-faf5f5d .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-dcb0d57 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-3a8fd4c .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-1d870f5 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-4508314{--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-23 .elementor-element.elementor-element-01f80ff .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-01f80ff .elementor-icon-box-title, .elementor-23 .elementor-element.elementor-element-01f80ff .elementor-icon-box-title a{font-family:"Roboto", Sans-serif;font-size:1px;font-weight:600;}.elementor-23 .elementor-element.elementor-element-2397f23 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-23 .elementor-element.elementor-element-27b4650 .elementor-icon-box-wrapper{align-items:start;gap:15px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-23 .elementor-element.elementor-element-ec908ba{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-23 .elementor-element.elementor-element-1ca9f9e{--content-width:85%;}.elementor-23 .elementor-element.elementor-element-677a4a6{--width:72%;}.elementor-23 .elementor-element.elementor-element-1b17159{--content-width:100%;}.elementor-23 .elementor-element.elementor-element-5a5014d{--width:50%;}.elementor-23 .elementor-element.elementor-element-06530fe{--width:50%;}.elementor-23 .elementor-element.elementor-element-33a8a71{--width:100%;}.elementor-23 .elementor-element.elementor-element-e856ad6{--width:100%;}.elementor-23 .elementor-element.elementor-element-f566e1f{--content-width:78%;}.elementor-23 .elementor-element.elementor-element-afdd0c9{--width:100%;}.elementor-23 .elementor-element.elementor-element-bc3d7ef{--width:53%;}}@media(max-width:767px){.elementor-23 .elementor-element.elementor-element-ec908ba{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-1ca9f9e *//* ==========================================================
YOUR WAY CLEANING
ABOUT US HERO
ESTÉTICA PREMIUM + EDITABLE DESDE ELEMENTOR
========================================================== */
/* ==========================================================
1. CONTENEDOR GENERAL
NO TOCA EL BACKGROUND
========================================================== */
.yw-about-hero {
position: relative !important;
overflow: hidden !important;
border-radius: 28px !important;
border:
1px solid rgba(23, 63, 145, .07) !important;
box-shadow:
0 18px 45px rgba(23, 63, 145, .055) !important;
}
/* ==========================================================
2. COLUMNA IZQUIERDA
========================================================== */
.yw-about-hero-content {
position: relative !important;
z-index: 3 !important;
padding:
42px
42px
38px !important;
box-sizing: border-box !important;
/*
Fondo translúcido para que el texto
siempre sea legible sin tapar la foto
*/
background:
linear-gradient(
90deg,
rgba(255,255,255,.96) 0%,
rgba(255,255,255,.90) 72%,
rgba(255,255,255,.15) 100%
) !important;
}
/* ==========================================================
3. ABOUT US
========================================================== */
.yw-about-hero-kicker {
margin-bottom: 12px !important;
}
.yw-about-hero-kicker .elementor-heading-title {
color: #5cb83b !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
font-weight: 700 !important;
}
/* línea decorativa */
.yw-about-hero-kicker .elementor-heading-title::after {
content: "";
display: block;
width: 30px;
height: 2px;
margin-top: 7px;
border-radius: 30px;
background:
linear-gradient(
90deg,
#59b93b,
#19abe0
);
}
/* ==========================================================
4. TÍTULO PRINCIPAL
========================================================== */
.yw-about-hero-title {
margin-bottom: 19px !important;
max-width: 570px !important;
}
.yw-about-hero-title .elementor-heading-title {
color: #173f91 !important;
line-height: 1.05 !important;
letter-spacing: -1px !important;
}
/*
Usa esta clase dentro del título para CLEANING
*/
.yw-about-title-accent {
background:
linear-gradient(
90deg,
#17a8df 0%,
#27b8df 46%,
#64bd3e 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ==========================================================
5. TEXTO
========================================================== */
.yw-about-hero-text {
max-width: 610px !important;
margin-bottom: 28px !important;
}
.yw-about-hero-text p {
color: #596672 !important;
line-height: 1.65 !important;
}
.yw-about-hero-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
6. CONTENEDOR DE LOS 3 BENEFICIOS
========================================================== */
.yw-about-hero-features {
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
align-items: stretch !important;
}
/* ==========================================================
7. CADA MINI TARJETA
========================================================== */
.yw-about-hero-feature {
width: 100% !important;
padding:
15px
14px !important;
box-sizing: border-box !important;
position: relative !important;
background:
rgba(255,255,255,.78) !important;
border:
1px solid rgba(23, 63, 145, .08) !important;
border-radius: 16px !important;
box-shadow:
0 7px 20px rgba(23,63,145,.045) !important;
backdrop-filter:
blur(6px) !important;
-webkit-backdrop-filter:
blur(6px) !important;
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease !important;
}
.yw-about-hero-feature:hover {
transform: translateY(-3px) !important;
border-color:
rgba(25,171,224,.18) !important;
box-shadow:
0 12px 25px rgba(23,63,145,.08) !important;
}
/* ==========================================================
8. ESTRUCTURA INTERNA DE CADA ICON BOX
========================================================== */
.yw-about-hero-feature .elementor-icon-box-wrapper {
display: grid !important;
grid-template-columns:
auto
1fr !important;
column-gap: 11px !important;
align-items: center !important;
text-align: left !important;
}
.yw-about-hero-feature .elementor-icon-box-icon {
margin: 0 !important;
}
/* ==========================================================
9. ICONOS
NO FIJA EL TAMAÑO DEL ICONO
========================================================== */
.yw-about-hero-feature .elementor-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px !important;
background:
linear-gradient(
145deg,
#eef9fd,
#f2faee
) !important;
border:
1px solid rgba(25,171,224,.12) !important;
border-radius: 13px !important;
box-shadow:
0 4px 12px rgba(23,63,145,.055) !important;
}
/* TRUSTED */
.yw-about-hero-feature:nth-child(1) .elementor-icon,
.yw-about-hero-feature:nth-child(1) .elementor-icon i {
color: #168fd1 !important;
}
.yw-about-hero-feature:nth-child(1) .elementor-icon svg {
fill: #168fd1 !important;
color: #168fd1 !important;
}
/* EXPERIENCED */
.yw-about-hero-feature:nth-child(2) .elementor-icon,
.yw-about-hero-feature:nth-child(2) .elementor-icon i {
color: #5db83d !important;
}
.yw-about-hero-feature:nth-child(2) .elementor-icon svg {
fill: #5db83d !important;
color: #5db83d !important;
}
/* FLEXIBLE */
.yw-about-hero-feature:nth-child(3) .elementor-icon,
.yw-about-hero-feature:nth-child(3) .elementor-icon i {
color: #19abe0 !important;
}
.yw-about-hero-feature:nth-child(3) .elementor-icon svg {
fill: #19abe0 !important;
color: #19abe0 !important;
}
/* ==========================================================
10. TÍTULOS BENEFICIOS
========================================================== */
.yw-about-hero-feature .elementor-icon-box-title {
margin-bottom: 4px !important;
}
.yw-about-hero-feature .elementor-icon-box-title,
.yw-about-hero-feature .elementor-icon-box-title span {
color: #173f91 !important;
font-weight: 700 !important;
}
/* ==========================================================
11. DESCRIPCIONES BENEFICIOS
========================================================== */
.yw-about-hero-feature .elementor-icon-box-description {
color: #64717c !important;
line-height: 1.45 !important;
}
/* ==========================================================
12. COLUMNA DE LA FOTO
========================================================== */
.yw-about-hero-image {
position: relative !important;
overflow: hidden !important;
}
/* NO modifica tamaño de imagen desde Elementor */
.yw-about-hero-image img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
object-position: center !important;
}
/* transición hacia el texto */
.yw-about-hero-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(
90deg,
rgba(255,255,255,.62) 0%,
rgba(255,255,255,.18) 14%,
rgba(255,255,255,0) 32%
);
pointer-events: none;
}
/* ==========================================================
13. TABLET
========================================================== */
@media (max-width: 1024px) {
.yw-about-hero-content {
padding:
35px
28px
32px !important;
}
.yw-about-hero-features {
grid-template-columns:
repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.yw-about-hero-feature {
padding:
12px
10px !important;
}
.yw-about-hero-feature .elementor-icon-box-wrapper {
grid-template-columns:
1fr !important;
row-gap:
8px !important;
text-align:
left !important;
}
}
/* ==========================================================
14. MOBILE
========================================================== */
@media (max-width: 767px) {
.yw-about-hero {
border-radius:
22px !important;
}
.yw-about-hero-content {
padding:
28px
20px
25px !important;
background:
rgba(255,255,255,.96) !important;
}
.yw-about-hero-title {
max-width:
100% !important;
}
.yw-about-hero-text {
max-width:
100% !important;
margin-bottom:
22px !important;
}
.yw-about-hero-features {
grid-template-columns:
1fr !important;
gap:
9px !important;
}
.yw-about-hero-feature {
padding:
13px
14px !important;
}
.yw-about-hero-feature .elementor-icon-box-wrapper {
grid-template-columns:
auto
1fr !important;
column-gap:
12px !important;
align-items:
center !important;
}
.yw-about-hero-image::before {
display:
none !important;
}
}/* ==========================================================
ABOUT HERO
MÁS VIDA PARA EL BLOQUE DE TEXTO
========================================================== */
/* ----------------------------------------------------------
ABOUT US - ETIQUETA
---------------------------------------------------------- */
.yw-about-hero-kicker {
margin-bottom: 15px !important;
}
.yw-about-hero-kicker .elementor-heading-title {
color: #5db83d !important;
text-transform: uppercase !important;
letter-spacing: 2.4px !important;
font-weight: 700 !important;
}
/* pequeña línea decorativa */
.yw-about-hero-kicker .elementor-heading-title::after {
content: "";
display: block;
width: 34px;
height: 2px;
margin-top: 8px;
border-radius: 20px;
background:
linear-gradient(
90deg,
#5cba3c 0%,
#18a9dd 100%
);
}
/* ----------------------------------------------------------
TÍTULO PRINCIPAL
---------------------------------------------------------- */
.yw-about-hero-title {
position: relative !important;
max-width: 590px !important;
margin-bottom: 23px !important;
}
.yw-about-hero-title .elementor-heading-title {
color: #173f91 !important;
line-height: .98 !important;
letter-spacing: -1.5px !important;
font-weight: 800 !important;
}
/* YOUR WAY */
.yw-about-title-accent {
display: inline-block;
background:
linear-gradient(
90deg,
#149fda 0%,
#1bb7e1 45%,
#62bd3e 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* pequeño detalle detrás del título */
.yw-about-hero-title::after {
content: "";
position: absolute;
width: 62px;
height: 8px;
left: 2px;
bottom: -10px;
border-radius: 50px;
background:
linear-gradient(
90deg,
rgba(22, 167, 218, .18),
rgba(96, 187, 61, .13)
);
pointer-events: none;
}
/* ----------------------------------------------------------
BLOQUE DE PÁRRAFOS
---------------------------------------------------------- */
.yw-about-hero-text {
max-width: 610px !important;
position: relative !important;
margin-bottom: 30px !important;
padding:
5px
0
5px
20px !important;
border-left:
3px solid
rgba(24, 166, 218, .18) !important;
}
/* párrafos generales */
.yw-about-hero-text p {
color: #596773 !important;
line-height: 1.68 !important;
margin-bottom: 15px !important;
}
/* primer párrafo más importante */
.yw-about-hero-text p:first-child {
color: #374b5d !important;
font-weight: 500 !important;
}
/* segundo párrafo ligeramente más suave */
.yw-about-hero-text p:last-child {
color: #667480 !important;
margin-bottom: 0 !important;
}
/* ----------------------------------------------------------
PALABRAS IMPORTANTES DENTRO DEL TEXTO
---------------------------------------------------------- */
.yw-about-highlight {
color: #173f91 !important;
font-weight: 700 !important;
position: relative;
}
/* subrayado suave */
.yw-about-highlight::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 4px;
z-index: -1;
border-radius: 20px;
background:
linear-gradient(
90deg,
rgba(26, 171, 224, .18),
rgba(97, 189, 62, .16)
);
}
/* ----------------------------------------------------------
TARJETAS DE BENEFICIOS
MÁS INTEGRADAS CON EL TEXTO
---------------------------------------------------------- */
.yw-about-hero-feature {
position: relative !important;
}
/* pequeño acento superior */
.yw-about-hero-feature::before {
content: "";
position: absolute;
top: 0;
left: 16px;
width: 34px;
height: 2px;
background:
linear-gradient(
90deg,
#17a7dc,
#62bd3e
);
border-radius: 20px;
opacity: .75;
}/* ==========================================================
ABOUT US HERO
ICONOS CON MÁS VIDA
TAMAÑO EDITABLE DESDE ELEMENTOR
========================================================== */
/* ----------------------------------------------------------
CONTENEDOR DEL ICONO
---------------------------------------------------------- */
.yw-about-hero-feature .elementor-icon-box-icon {
position: relative !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ----------------------------------------------------------
CAJA DEL ICONO
---------------------------------------------------------- */
.yw-about-hero-feature .elementor-icon {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 13px !important;
border-radius: 16px !important;
border: 1px solid rgba(23, 63, 145, .08) !important;
box-shadow:
0 7px 18px rgba(23, 63, 145, .08),
inset 0 1px 0 rgba(255,255,255,.9) !important;
transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease !important;
}
/* ==========================================================
1. TRUSTED
AZUL
========================================================== */
.yw-about-hero-feature:nth-child(1) .elementor-icon {
background:
linear-gradient(
145deg,
#edf8fd 0%,
#e5f4fc 100%
) !important;
color: #168fd1 !important;
border-color:
rgba(22, 143, 209, .15) !important;
}
.yw-about-hero-feature:nth-child(1) .elementor-icon i {
color: #168fd1 !important;
}
.yw-about-hero-feature:nth-child(1) .elementor-icon svg {
fill: #168fd1 !important;
color: #168fd1 !important;
}
/* ==========================================================
2. EXPERIENCED
VERDE
========================================================== */
.yw-about-hero-feature:nth-child(2) .elementor-icon {
background:
linear-gradient(
145deg,
#f2faed 0%,
#e9f7e3 100%
) !important;
color: #59b93c !important;
border-color:
rgba(89, 185, 60, .17) !important;
}
.yw-about-hero-feature:nth-child(2) .elementor-icon i {
color: #59b93c !important;
}
.yw-about-hero-feature:nth-child(2) .elementor-icon svg {
fill: #59b93c !important;
color: #59b93c !important;
}
/* ==========================================================
3. FLEXIBLE
CELESTE
========================================================== */
.yw-about-hero-feature:nth-child(3) .elementor-icon {
background:
linear-gradient(
145deg,
#eaf9fc 0%,
#ecf8f2 100%
) !important;
color: #18addd !important;
border-color:
rgba(24, 173, 221, .16) !important;
}
.yw-about-hero-feature:nth-child(3) .elementor-icon i {
color: #18addd !important;
}
.yw-about-hero-feature:nth-child(3) .elementor-icon svg {
fill: #18addd !important;
color: #18addd !important;
}
/* ==========================================================
HALO DETRÁS DEL ICONO
========================================================== */
.yw-about-hero-feature .elementor-icon-box-icon::before {
content: "";
position: absolute;
width: 72%;
height: 72%;
left: 14%;
top: 14%;
border-radius: 50%;
filter: blur(13px);
opacity: .24;
z-index: -1;
pointer-events: none;
}
/* TRUSTED HALO */
.yw-about-hero-feature:nth-child(1)
.elementor-icon-box-icon::before {
background: #18a5dc;
}
/* EXPERIENCED HALO */
.yw-about-hero-feature:nth-child(2)
.elementor-icon-box-icon::before {
background: #63bd3f;
}
/* FLEXIBLE HALO */
.yw-about-hero-feature:nth-child(3)
.elementor-icon-box-icon::before {
background: #21b9db;
}
/* ==========================================================
PEQUEÑO DESTELLO
========================================================== */
.yw-about-hero-feature .elementor-icon-box-icon::after {
content: "✦";
position: absolute;
right: -3px;
top: -6px;
display: flex;
align-items: center;
justify-content: center;
color: #67bd3e;
font-size: 10px;
line-height: 1;
background: #ffffff;
border-radius: 50%;
padding: 4px;
box-shadow:
0 4px 10px rgba(23,63,145,.10);
pointer-events: none;
}
/* variar el color */
.yw-about-hero-feature:nth-child(2)
.elementor-icon-box-icon::after {
color: #18a9dc;
}
.yw-about-hero-feature:nth-child(3)
.elementor-icon-box-icon::after {
color: #59b93c;
}
/* ==========================================================
HOVER
========================================================== */
.yw-about-hero-feature:hover .elementor-icon {
transform:
translateY(-4px)
rotate(-2deg)
scale(1.04) !important;
box-shadow:
0 12px 25px rgba(23,63,145,.13),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
/* icono 2 gira al otro lado */
.yw-about-hero-feature:nth-child(2):hover .elementor-icon {
transform:
translateY(-4px)
rotate(2deg)
scale(1.04) !important;
}
/* ==========================================================
TARJETA REACCIONA JUNTO AL ICONO
========================================================== */
.yw-about-hero-feature:hover {
background:
rgba(255,255,255,.93) !important;
border-color:
rgba(24, 169, 218, .15) !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1b17159 *//* ==========================================================
YOUR WAY CLEANING
ABOUT US - CSS FINAL
OUR STORY + OUR COMMITMENT
========================================================== */
/* ==========================================================
VARIABLES DE COLOR
========================================================== */
.yw-about-story,
.yw-about-commitment {
--yw-navy: #173f91;
--yw-blue: #168fd1;
--yw-cyan: #19abe0;
--yw-green: #60bb3d;
--yw-text: #566572;
--yw-muted: #687581;
}
/* ==========================================================
==========================================================
OUR STORY
==========================================================
========================================================== */
/* ==========================================================
1. CONTENEDOR GENERAL
========================================================== */
.yw-about-story {
width: calc(100% - 28px) !important;
max-width: 1450px !important;
margin: 55px auto 24px !important;
padding: 42px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 55px !important;
position: relative !important;
background:
linear-gradient(
135deg,
#ffffff 0%,
#fbfdfe 58%,
#f6fbf4 100%
) !important;
border: 1px solid #e2ebef !important;
border-radius: 30px !important;
box-shadow:
0 18px 45px rgba(23, 63, 145, .06) !important;
overflow: hidden !important;
}
/* puntos decorativos */
.yw-about-story::before {
content: "";
position: absolute;
width: 95px;
height: 95px;
right: 34px;
top: 34px;
opacity: .24;
background-image:
radial-gradient(
circle,
#19abe0 2px,
transparent 2px
);
background-size: 16px 16px;
pointer-events: none;
}
/* halo inferior */
.yw-about-story::after {
content: "";
position: absolute;
width: 430px;
height: 430px;
left: -230px;
bottom: -285px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(24, 171, 220, .06),
transparent 70%
);
pointer-events: none;
}
/* ==========================================================
2. IMAGEN
========================================================== */
.yw-about-story-image {
width: 47% !important;
min-width: 0 !important;
position: relative !important;
z-index: 2 !important;
}
.yw-about-story-image img {
width: 100% !important;
display: block !important;
border-radius: 25px !important;
box-shadow:
0 15px 35px rgba(23, 63, 145, .10) !important;
}
.yw-about-story-image::after {
content: "";
position: absolute;
inset: -7px;
border:
1px solid rgba(25, 171, 224, .10);
border-radius: 30px;
pointer-events: none;
}
/* ==========================================================
3. COLUMNA DE TEXTO
========================================================== */
.yw-about-story-content {
width: 53% !important;
min-width: 0 !important;
position: relative !important;
z-index: 2 !important;
}
/* ==========================================================
4. OUR STORY
========================================================== */
.yw-about-kicker {
margin-bottom: 11px !important;
}
.yw-about-kicker .elementor-heading-title {
color: var(--yw-green) !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
}
/* línea decorativa */
.yw-about-kicker .elementor-heading-title::after {
content: "";
display: block;
width: 30px;
height: 2px;
margin-top: 7px;
border-radius: 40px;
background:
linear-gradient(
90deg,
var(--yw-green),
var(--yw-cyan)
);
}
/* ==========================================================
5. TÍTULO STORY
========================================================== */
.yw-about-story-title {
margin-bottom: 17px !important;
}
.yw-about-story-title .elementor-heading-title {
color: var(--yw-navy) !important;
}
/* opcional:
That Works Your Way
*/
.yw-about-accent {
background:
linear-gradient(
90deg,
#169fd9 0%,
#20b5df 48%,
#64bd3e 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ==========================================================
6. TEXTO STORY
========================================================== */
.yw-about-story-text {
max-width: 650px !important;
margin-bottom: 21px !important;
}
.yw-about-story-text p {
color: #596774 !important;
}
.yw-about-story-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
7. LISTA STORY
========================================================== */
.yw-about-story-list {
max-width: 650px !important;
}
.yw-about-story-list .elementor-icon-list-items {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.yw-about-story-list .elementor-icon-list-item {
margin: 0 !important;
}
.yw-about-story-list .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 10px !important;
padding: 4px !important;
background:
linear-gradient(
145deg,
#eff9ea,
#f7fbf5
) !important;
border:
1px solid rgba(94, 185, 59, .12) !important;
border-radius: 50% !important;
box-shadow:
0 3px 9px rgba(83,178,58,.09) !important;
}
.yw-about-story-list .elementor-icon-list-icon i {
color: var(--yw-green) !important;
}
.yw-about-story-list .elementor-icon-list-icon svg {
fill: var(--yw-green) !important;
color: var(--yw-green) !important;
}
.yw-about-story-list .elementor-icon-list-text {
color: #374550 !important;
}
/* ==========================================================
==========================================================
OUR COMMITMENT
==========================================================
========================================================== */
/* ==========================================================
8. CONTENEDOR GENERAL
========================================================== */
.yw-about-commitment {
width: calc(100% - 28px) !important;
max-width: 1450px !important;
margin: 18px auto 65px !important;
padding:
38px
44px
38px !important;
box-sizing: border-box !important;
position: relative !important;
isolation: isolate !important;
background:
linear-gradient(
125deg,
#f7fcfe 0%,
#f1f9fc 48%,
#f6fbf3 100%
) !important;
border:
1px solid #dfeaf0 !important;
border-radius: 30px !important;
box-shadow:
0 16px 40px rgba(23,63,145,.055) !important;
overflow: hidden !important;
}
/* halo azul */
.yw-about-commitment::before {
content: "";
position: absolute;
width: 470px;
height: 470px;
left: -280px;
bottom: -320px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(24,168,220,.09),
transparent 68%
);
z-index: 0;
pointer-events: none;
}
/* halo verde */
.yw-about-commitment::after {
content: "";
position: absolute;
width: 430px;
height: 430px;
right: -250px;
top: -300px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(93,185,60,.075),
transparent 68%
);
z-index: 0;
pointer-events: none;
}
.yw-about-commitment > * {
position: relative !important;
z-index: 2 !important;
}
/* ==========================================================
9. OUR COMMITMENT
========================================================== */
.yw-commitment-kicker {
margin:
0
auto
9px !important;
text-align: center !important;
}
.yw-commitment-kicker .elementor-heading-title {
color: var(--yw-green) !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
}
.yw-commitment-kicker .elementor-heading-title::after {
content: "";
display: block;
width: 31px;
height: 2px;
margin:
8px
auto
0;
border-radius: 30px;
background:
linear-gradient(
90deg,
var(--yw-green),
var(--yw-cyan)
);
}
/* ==========================================================
10. TÍTULO
========================================================== */
.yw-commitment-title {
margin:
0
auto
10px !important;
text-align: center !important;
}
.yw-commitment-title .elementor-heading-title {
color: var(--yw-navy) !important;
text-align: center !important;
}
/* opcional:
Quality Cleaning.
Every Time.
*/
.yw-commitment-accent {
background:
linear-gradient(
90deg,
#18a6db,
#61bd3e
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ==========================================================
11. TEXTO INTRO
========================================================== */
.yw-commitment-intro {
max-width: 690px !important;
margin:
0
auto
28px !important;
text-align: center !important;
}
.yw-commitment-intro,
.yw-commitment-intro p,
.yw-commitment-intro .elementor-heading-title {
color: #61707c !important;
text-align: center !important;
}
/* eliminar decoraciones anteriores */
.yw-commitment-intro::after,
.yw-commitment-title::after {
display: none !important;
}
/* ==========================================================
12. GRID
========================================================== */
.yw-commitment-grid {
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
margin-top: 0 !important;
position: relative !important;
z-index: 3 !important;
}
/* ==========================================================
13. TARJETAS
========================================================== */
.yw-commitment-card {
position: relative !important;
padding:
22px
24px !important;
box-sizing: border-box !important;
background:
rgba(255,255,255,.90) !important;
border:
1px solid rgba(23,63,145,.07) !important;
border-radius: 20px !important;
box-shadow:
0 8px 22px rgba(23,63,145,.05) !important;
overflow: hidden !important;
transition:
transform .24s ease,
box-shadow .24s ease,
border-color .24s ease,
background .24s ease !important;
}
/* eliminamos separadores antiguos */
.yw-commitment-card:not(:last-child) {
border-right:
1px solid rgba(23,63,145,.07) !important;
}
/* ==========================================================
14. ACENTO SUPERIOR
========================================================== */
.yw-commitment-card::before {
content: "";
position: absolute;
top: 0;
left: 22px;
right: 22px;
height: 3px;
border-radius:
0 0 20px 20px;
}
/* Reliable */
.yw-commitment-card:nth-child(1)::before {
background:
linear-gradient(
90deg,
#168fd1,
#20b2df
);
}
/* Attention */
.yw-commitment-card:nth-child(2)::before {
background:
linear-gradient(
90deg,
#57b83b,
#78c84a
);
}
/* Flexible */
.yw-commitment-card:nth-child(3)::before {
background:
linear-gradient(
90deg,
#19a8db,
#61bd3e
);
}
/* ==========================================================
15. DECORACIÓN DE FONDO DE CARD
========================================================== */
.yw-commitment-card::after {
content: "";
position: absolute;
width: 115px;
height: 115px;
right: -58px;
bottom: -65px;
border-radius: 50%;
opacity: .65;
pointer-events: none;
}
.yw-commitment-card:nth-child(1)::after {
background:
radial-gradient(
circle,
rgba(22,143,209,.11),
transparent 68%
);
}
.yw-commitment-card:nth-child(2)::after {
background:
radial-gradient(
circle,
rgba(92,185,60,.11),
transparent 68%
);
}
.yw-commitment-card:nth-child(3)::after {
background:
radial-gradient(
circle,
rgba(25,171,224,.10),
transparent 68%
);
}
/* ==========================================================
16. ICON BOX
========================================================== */
.yw-commitment-card
.elementor-icon-box-wrapper {
display: grid !important;
grid-template-columns:
auto
1fr !important;
column-gap: 18px !important;
align-items: center !important;
text-align: left !important;
position: relative !important;
z-index: 2 !important;
}
.yw-commitment-card
.elementor-icon-box-icon {
margin: 0 !important;
}
/* ==========================================================
17. ICONOS
========================================================== */
.yw-commitment-card .elementor-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px !important;
background:
linear-gradient(
145deg,
#ffffff,
#f8fbfc
) !important;
border:
1px solid rgba(23,63,145,.085) !important;
border-radius: 50% !important;
box-shadow:
0 8px 20px rgba(23,63,145,.08),
inset 0 1px 0 rgba(255,255,255,1) !important;
transition:
transform .24s ease,
box-shadow .24s ease !important;
}
/* 1 */
.yw-commitment-card:nth-child(1)
.elementor-icon,
.yw-commitment-card:nth-child(1)
.elementor-icon i {
color: #1798d4 !important;
}
/* 2 */
.yw-commitment-card:nth-child(2)
.elementor-icon,
.yw-commitment-card:nth-child(2)
.elementor-icon i {
color: #5db93d !important;
}
/* 3 */
.yw-commitment-card:nth-child(3)
.elementor-icon,
.yw-commitment-card:nth-child(3)
.elementor-icon i {
color: #1aaadd !important;
}
/* SVG */
.yw-commitment-card:nth-child(1)
.elementor-icon svg {
fill: #1798d4 !important;
color: #1798d4 !important;
}
.yw-commitment-card:nth-child(2)
.elementor-icon svg {
fill: #5db93d !important;
color: #5db93d !important;
}
.yw-commitment-card:nth-child(3)
.elementor-icon svg {
fill: #1aaadd !important;
color: #1aaadd !important;
}
/* ==========================================================
18. TEXTO DE LAS TARJETAS
========================================================== */
.yw-commitment-card
.elementor-icon-box-title {
margin:
0
0
5px !important;
}
.yw-commitment-card
.elementor-icon-box-title,
.yw-commitment-card
.elementor-icon-box-title span {
color: var(--yw-navy) !important;
}
.yw-commitment-card
.elementor-icon-box-description {
color: #586773 !important;
}
/* ==========================================================
19. HOVER
========================================================== */
.yw-commitment-card:hover {
transform:
translateY(-5px) !important;
background:
rgba(255,255,255,.98) !important;
border-color:
rgba(24,169,221,.14) !important;
box-shadow:
0 15px 31px
rgba(23,63,145,.09) !important;
}
.yw-commitment-card:hover
.elementor-icon {
transform:
translateY(-2px)
scale(1.055) !important;
box-shadow:
0 12px 26px
rgba(23,63,145,.13) !important;
}
/* azul */
.yw-commitment-card:nth-child(1):hover {
background:
linear-gradient(
145deg,
#ffffff,
#f3fbfe
) !important;
}
/* verde */
.yw-commitment-card:nth-child(2):hover {
background:
linear-gradient(
145deg,
#ffffff,
#f5fbf1
) !important;
}
/* azul/verde */
.yw-commitment-card:nth-child(3):hover {
background:
linear-gradient(
145deg,
#ffffff,
#f2fbf8
) !important;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 1024px) {
.yw-about-story {
padding:
36px
30px !important;
gap: 35px !important;
}
.yw-about-story-image {
width: 46% !important;
}
.yw-about-story-content {
width: 54% !important;
}
.yw-about-commitment {
padding:
34px
28px
32px !important;
}
.yw-commitment-grid {
gap: 10px !important;
}
.yw-commitment-card {
padding:
20px
17px !important;
}
.yw-commitment-card
.elementor-icon-box-wrapper {
column-gap: 13px !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767px) {
/* STORY */
.yw-about-story {
width: calc(100% - 12px) !important;
margin:
35px
auto
18px !important;
padding:
25px
18px !important;
flex-direction:
column !important;
gap:
27px !important;
border-radius:
24px !important;
}
.yw-about-story-image,
.yw-about-story-content {
width:
100% !important;
}
.yw-about-story::before {
display: none !important;
}
.yw-about-story-image img {
border-radius:
20px !important;
}
/* COMMITMENT */
.yw-about-commitment {
width: calc(100% - 12px) !important;
margin:
15px
auto
45px !important;
padding:
28px
17px
18px !important;
border-radius:
24px !important;
}
.yw-commitment-intro {
margin-bottom:
20px !important;
}
.yw-commitment-grid {
grid-template-columns:
1fr !important;
gap:
10px !important;
}
.yw-commitment-card {
padding:
20px
18px !important;
}
.yw-commitment-card
.elementor-icon-box-wrapper {
grid-template-columns:
auto
1fr !important;
column-gap:
15px !important;
}
.yw-commitment-card:hover {
transform:
translateY(-3px) !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f566e1f *//* ==========================================================
YOUR WAY CLEANING
SERVICE AREAS SECTION
FINAL CONSOLIDATED VERSION
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700;800&display=swap');
/* ==========================================================
1. SECCION PRINCIPAL
========================================================== */
.yw-area-section {
width: calc(100% - 28px) !important;
max-width: 1480px !important;
margin: 70px auto !important;
padding: 64px 62px 58px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 65px !important;
position: relative !important;
box-sizing: border-box !important;
background:
linear-gradient(
135deg,
#ffffff 0%,
#fbfdfc 58%,
#f5f9f3 100%
) !important;
border: 1px solid #e6ece6 !important;
border-radius: 32px !important;
box-shadow:
0 18px 48px rgba(23, 63, 145, .065) !important;
overflow: hidden !important;
}
/* decoración suave del fondo */
.yw-area-section::before {
content: "";
position: absolute;
width: 450px;
height: 450px;
left: -220px;
bottom: -220px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(32, 174, 224, .055),
transparent 72%
);
pointer-events: none;
}
/* ==========================================================
2. COLUMNA IZQUIERDA
========================================================== */
.yw-area-left {
width: 44% !important;
min-width: 0 !important;
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* ==========================================================
3. KICKER
SERVING THE FOLLOWING AREAS
========================================================== */
.yw-area-kicker,
.yw-area-kicker .elementor-heading-title {
font-family: "Manrope", sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 2.3px !important;
text-transform: uppercase !important;
color: #59b63b !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
/* línea decorativa */
.yw-area-kicker .elementor-heading-title::after {
content: "";
display: inline-block;
width: 22px;
height: 2px;
margin-left: 10px;
vertical-align: middle;
border-radius: 50px;
background:
linear-gradient(
90deg,
#1caee1,
#60ba3d
);
}
/* ==========================================================
4. TITULO PRINCIPAL
========================================================== */
.yw-area-title,
.yw-area-title .elementor-heading-title {
font-family: "Manrope", sans-serif !important;
font-size: 50px !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -1.8px !important;
color: #173f91 !important;
margin: 0 0 22px 0 !important;
padding: 0 !important;
}
/* Cleaning Team */
.yw-area-title .yw-area-blue {
color: #1caddf !important;
}
/* Metro */
.yw-area-title .yw-area-green {
color: #5eb83c !important;
}
/* ==========================================================
5. TEXTO DESCRIPTIVO
========================================================== */
.yw-area-text {
max-width: 520px !important;
margin-bottom: 21px !important;
}
.yw-area-text,
.yw-area-text p {
font-family: "Inter", sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
color: #56616c !important;
margin-top: 0 !important;
}
/* ==========================================================
6. LISTA DE BENEFICIOS IZQUIERDA
========================================================== */
.yw-area-list {
width: 100% !important;
margin-bottom: 22px !important;
}
.yw-area-list .elementor-icon-list-items {
margin: 0 !important;
padding: 0 !important;
}
.yw-area-list .elementor-icon-list-item {
padding: 11px 0 !important;
margin: 0 !important;
border-bottom: 1px solid #e4e9e6 !important;
}
.yw-area-list .elementor-icon-list-item:last-child {
border-bottom: none !important;
}
/* icono check */
.yw-area-list .elementor-icon-list-icon {
margin-right: 12px !important;
}
.yw-area-list .elementor-icon-list-icon i {
color: #59b83b !important;
font-size: 17px !important;
}
.yw-area-list .elementor-icon-list-icon svg {
width: 17px !important;
height: 17px !important;
fill: #59b83b !important;
color: #59b83b !important;
}
/* texto lista */
.yw-area-list .elementor-icon-list-text {
font-family: "Inter", sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
color: #27333d !important;
}
/* ==========================================================
7. BOTON
========================================================== */
.yw-area-btn {
margin-top: -4px !important;
}
.yw-area-btn .elementor-button {
min-height: 50px !important;
padding: 13px 27px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #ffffff !important;
background:
linear-gradient(
90deg,
#0873c8 0%,
#18b9e8 100%
) !important;
border: none !important;
border-radius: 999px !important;
box-shadow:
0 10px 24px rgba(12, 128, 205, .18) !important;
transition:
transform .2s ease,
box-shadow .2s ease !important;
}
.yw-area-btn .elementor-button:hover {
transform: translateY(-2px) !important;
box-shadow:
0 14px 28px rgba(12, 128, 205, .24) !important;
}
/* ==========================================================
8. COLUMNA DERECHA
========================================================== */
.yw-area-right {
width: 56% !important;
min-width: 0 !important;
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
/* ==========================================================
9. MAPA
========================================================== */
.yw-area-map {
width: 100% !important;
overflow: hidden !important;
border-radius: 26px !important;
box-shadow:
0 15px 38px rgba(23, 63, 145, .10) !important;
}
.yw-area-map .elementor-widget-container {
width: 100% !important;
overflow: hidden !important;
border-radius: 26px !important;
}
.yw-area-map iframe {
width: 100% !important;
height: 385px !important;
display: block !important;
border: none !important;
border-radius: 26px !important;
}
/* ==========================================================
10. CONTENEDOR BENEFICIOS DEBAJO DEL MAPA
========================================================== */
.yw-area-benefits {
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 0 !important;
padding: 22px 20px !important;
background: #ffffff !important;
border: 1px solid #e6ece7 !important;
border-radius: 22px !important;
box-shadow:
0 12px 30px rgba(23, 63, 145, .065) !important;
box-sizing: border-box !important;
}
/* ==========================================================
11. CADA BENEFICIO
========================================================== */
.yw-area-benefit {
min-width: 0 !important;
padding: 9px 19px !important;
display: flex !important;
align-items: center !important;
gap: 13px !important;
border-right: 1px solid #e4e9e5 !important;
box-sizing: border-box !important;
}
.yw-area-benefit:last-child {
border-right: none !important;
}
/* ==========================================================
12. ICONOS BENEFICIOS
MÁS GRANDES
========================================================== */
.yw-area-benefit .elementor-icon {
font-size: 32px !important;
color: #59b83b !important;
flex-shrink: 0 !important;
}
.yw-area-benefit .elementor-icon svg {
width: 32px !important;
height: 32px !important;
fill: #59b83b !important;
color: #59b83b !important;
}
/* espacio icono-texto de Elementor */
.yw-area-benefit .elementor-icon-box-wrapper {
display: flex !important;
align-items: center !important;
gap: 13px !important;
text-align: left !important;
}
.yw-area-benefit .elementor-icon-box-icon {
margin: 0 !important;
flex-shrink: 0 !important;
}
.yw-area-benefit .elementor-icon-box-content {
min-width: 0 !important;
}
/* ==========================================================
13. TITULO BENEFICIOS
MÁS GRANDE
========================================================== */
.yw-area-benefit .elementor-icon-box-title {
margin:
0
0
5px
0 !important;
}
.yw-area-benefit .elementor-icon-box-title,
.yw-area-benefit .elementor-icon-box-title span {
font-family: "Manrope", sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: #173f91 !important;
}
/* ==========================================================
14. DESCRIPCION BENEFICIOS
MÁS GRANDE
========================================================== */
.yw-area-benefit .elementor-icon-box-description {
font-family: "Inter", sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: #66717a !important;
margin: 0 !important;
}
/* ==========================================================
15. TABLET
========================================================== */
@media (max-width: 1024px) {
.yw-area-section {
padding:
50px
30px !important;
gap: 40px !important;
}
.yw-area-left {
width: 45% !important;
}
.yw-area-right {
width: 55% !important;
}
.yw-area-title,
.yw-area-title .elementor-heading-title {
font-size: 39px !important;
}
.yw-area-map iframe {
height: 350px !important;
}
.yw-area-benefits {
padding: 18px 12px !important;
}
.yw-area-benefit {
padding: 8px 10px !important;
gap: 9px !important;
}
.yw-area-benefit .elementor-icon {
font-size: 27px !important;
}
.yw-area-benefit .elementor-icon svg {
width: 27px !important;
height: 27px !important;
}
.yw-area-benefit .elementor-icon-box-wrapper {
gap: 9px !important;
}
.yw-area-benefit .elementor-icon-box-title,
.yw-area-benefit .elementor-icon-box-title span {
font-size: 13px !important;
}
.yw-area-benefit .elementor-icon-box-description {
font-size: 10.5px !important;
}
}
/* ==========================================================
16. MOBILE
========================================================== */
@media (max-width: 767px) {
.yw-area-section {
width: calc(100% - 12px) !important;
margin: 45px auto !important;
padding:
38px
18px !important;
flex-direction: column !important;
gap: 32px !important;
border-radius: 24px !important;
}
.yw-area-left,
.yw-area-right {
width: 100% !important;
}
.yw-area-kicker,
.yw-area-kicker .elementor-heading-title {
font-size: 10px !important;
letter-spacing: 1.7px !important;
}
.yw-area-title,
.yw-area-title .elementor-heading-title {
font-size: 33px !important;
line-height: 1.1 !important;
letter-spacing: -1px !important;
}
.yw-area-text,
.yw-area-text p {
font-size: px !important;
}
.yw-area-list .elementor-icon-list-text {
font-size: px !important;
}
.yw-area-btn .elementor-button {
width: 100% !important;
}
.yw-area-map,
.yw-area-map .elementor-widget-container,
.yw-area-map iframe {
border-radius: 20px !important;
}
.yw-area-map iframe {
height: 300px !important;
}
/* beneficios uno debajo del otro */
.yw-area-benefits {
grid-template-columns: 1fr !important;
padding:
8px
18px !important;
border-radius: 20px !important;
}
.yw-area-benefit {
width: 100% !important;
padding:
17px
5px !important;
gap: 13px !important;
border-right: none !important;
border-bottom:
1px solid
#e4e9e5 !important;
}
.yw-area-benefit:last-child {
border-bottom: none !important;
}
.yw-area-benefit .elementor-icon-box-wrapper {
gap: 13px !important;
}
.yw-area-benefit .elementor-icon {
font-size: 30px !important;
}
.yw-area-benefit .elementor-icon svg {
width: 30px !important;
height: 30px !important;
}
.yw-area-benefit .elementor-icon-box-title,
.yw-area-benefit .elementor-icon-box-title span {
font-size: 15px !important;
}
.yw-area-benefit .elementor-icon-box-description {
font-size: 12px !important;
}
}/* End custom CSS */