.elementor-1765 .elementor-element.elementor-element-13896ac{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1765 .elementor-element.elementor-element-ab08c87{--display:flex;--min-height:100vh;--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-ab08c87:not(.elementor-motion-effects-element-type-background), .elementor-1765 .elementor-element.elementor-element-ab08c87 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://lovelygolden.es/wp-content/uploads/2025/06/6-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1765 .elementor-element.elementor-element-d9d504b{z-index:0;}.elementor-1765 .elementor-element.elementor-element-42d33cd{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--z-index:1;}.elementor-1765 .elementor-element.elementor-element-a2bcbcc > .elementor-widget-container{border-style:solid;border-width:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-1765 .elementor-element.elementor-element-8348291{--display:flex;--min-height:100vh;--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-8348291:not(.elementor-motion-effects-element-type-background), .elementor-1765 .elementor-element.elementor-element-8348291 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://lovelygolden.es/wp-content/uploads/2025/06/ChatGPT-Image-2-jun-2025-01_57_15.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1765 .elementor-element.elementor-element-576a684{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-8461eda{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-8c35bfb{--display:flex;--min-height:100vh;--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-8c35bfb:not(.elementor-motion-effects-element-type-background), .elementor-1765 .elementor-element.elementor-element-8c35bfb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://lovelygolden.es/wp-content/uploads/2025/06/ChatGPT-Image-2-jun-2025-01_57_15.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1765 .elementor-element.elementor-element-1686345{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-c784c88{--display:flex;--min-height:100vh;--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-c784c88:not(.elementor-motion-effects-element-type-background), .elementor-1765 .elementor-element.elementor-element-c784c88 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://lovelygolden.es/wp-content/uploads/2025/06/Fondo-Recuperado-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1765 .elementor-element.elementor-element-6f2e21a{text-align:center;}.elementor-1765 .elementor-element.elementor-element-6f2e21a .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:90px;font-weight:900;color:#020101;}.elementor-1765 .elementor-element.elementor-element-2ee664c{--spacer-size:50px;}.elementor-1765 .elementor-element.elementor-element-5f8c8c9{--display:flex;}.elementor-1765 .elementor-element.elementor-element-0f6b9dd{--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-1765 .elementor-element.elementor-element-a54b003 .elementor-button{background-color:#F1BD87;border-style:none;border-radius:15px 15px 15px 15px;}.elementor-1765 .elementor-element.elementor-element-5aa8adc{--display:flex;}.elementor-1765 .elementor-element.elementor-element-771658a{--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-1765 .elementor-element.elementor-element-c8fd5a8 .elementor-button{background-color:#F1BD87;border-radius:15px 15px 15px 15px;}.elementor-1765 .elementor-element.elementor-element-460a208{--display:flex;}.elementor-1765 .elementor-element.elementor-element-59b635e{--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-1765 .elementor-element.elementor-element-9b3faf5 .elementor-button{background-color:#F1BD87;border-radius:15px 15px 15px 15px;}.elementor-1765 .elementor-element.elementor-element-80c8a2f{--display:flex;}.elementor-1765 .elementor-element.elementor-element-a67f59c{--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-1765 .elementor-element.elementor-element-d814208 .elementor-button{background-color:#F1BD87;border-radius:15px 15px 15px 15px;}.elementor-1765 .elementor-element.elementor-element-b40083f{--display:flex;}.elementor-1765 .elementor-element.elementor-element-a3e2778{--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-1765 .elementor-element.elementor-element-49bc6f3 .elementor-button{background-color:#F1BD87;border-radius:15px 15px 15px 15px;}.elementor-1765 .elementor-element.elementor-element-e1dab20{--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}.elementor-1765 .elementor-element.elementor-element-3fe6a16{--display:flex;--min-height:100vh;--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-3fe6a16:not(.elementor-motion-effects-element-type-background), .elementor-1765 .elementor-element.elementor-element-3fe6a16 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://lovelygolden.es/wp-content/uploads/2025/06/Fondo-Recuperado2-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1765 .elementor-element.elementor-element-9b9c0d4{text-align:center;}.elementor-1765 .elementor-element.elementor-element-9b9c0d4 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:90px;font-weight:900;}.elementor-1765 .elementor-element.elementor-element-57ea4a5{--spacer-size:17vh;}.elementor-1765 .elementor-element.elementor-element-db380e5{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(3, 1fr);--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-3e633f1 .elementor-button{background-color:#02010100;}.elementor-1765 .elementor-element.elementor-element-cf010c5 .elementor-button{background-color:#02010100;}.elementor-1765 .elementor-element.elementor-element-440c0f6 .elementor-button{background-color:#E6E6E600;}.elementor-1765 .elementor-element.elementor-element-56c09c7{--display:flex;}.elementor-1765 .elementor-element.elementor-element-a258a35{--display:flex;}@media(min-width:768px){.elementor-1765 .elementor-element.elementor-element-576a684{--width:100%;}.elementor-1765 .elementor-element.elementor-element-8461eda{--width:100%;}.elementor-1765 .elementor-element.elementor-element-1686345{--width:100%;}}@media(max-width:1024px){.elementor-1765 .elementor-element.elementor-element-42d33cd{--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-576a684{--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-8461eda{--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-1686345{--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-e1dab20{--e-n-carousel-swiper-slides-to-display:2;}.elementor-1765 .elementor-element.elementor-element-db380e5{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-1765 .elementor-element.elementor-element-13896ac{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1765 .elementor-element.elementor-element-ab08c87{--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-d9d504b img{width:80%;}.elementor-1765 .elementor-element.elementor-element-42d33cd{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-8348291{--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-576a684{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-8461eda{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-8c35bfb{--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-1686345{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1765 .elementor-element.elementor-element-c784c88{--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-6f2e21a{text-align:center;}.elementor-1765 .elementor-element.elementor-element-6f2e21a .elementor-heading-title{font-size:65px;}.elementor-1765 .elementor-element.elementor-element-2ee664c{--spacer-size:2vh;}.elementor-1765 .elementor-element.elementor-element-e1dab20{--e-n-carousel-swiper-slides-to-display:1;}.elementor-1765 .elementor-element.elementor-element-3fe6a16{--justify-content:center;}.elementor-1765 .elementor-element.elementor-element-3fe6a16:not(.elementor-motion-effects-element-type-background), .elementor-1765 .elementor-element.elementor-element-3fe6a16 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;}.elementor-1765 .elementor-element.elementor-element-9b9c0d4 .elementor-heading-title{font-size:55px;}.elementor-1765 .elementor-element.elementor-element-57ea4a5{--spacer-size:3vh;}.elementor-1765 .elementor-element.elementor-element-db380e5{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--align-items:center;}}/* Start custom CSS for button, class: .elementor-element-a2bcbcc *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-a2bcbcc .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-a493bd8 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-a493bd8 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #ff7a00 0%, #ff3a00 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8461eda */

💛 Nuestra historia

Lovely Golden nace gracias a Nala, nuestra Golden Retriever. Ella llegó a casa hace más de 3 años y nos cambió la vida para mejor: nos enseñó a disfrutar de lo simple —paseos largos, tiempo en familia y ratos de juego con su frisbee o pelota favorita— con esa mirada que lo dice todo. 🥰

Al principio costaba encontrar arneses que realmente se ajustaran a su talla, así que decidimos crearlos nosotros mismos: productos cómodos, resistentes y hechos con cariño. Poco a poco, sin prisas, fue naciendo Lovely Golden: del amor por los perros y las ganas de ofrecer algo especial para familias como la nuestra. ✨

  • 🏷️ Hecho con mimo
  • 🧪 Inspirado y probado por Nala
  • 🛠️ Materiales premium
Conoce nuestra historia
/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-a54b003 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-a54b003 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c8fd5a8 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-c8fd5a8 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-9b3faf5 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-9b3faf5 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d814208 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-d814208 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-49bc6f3 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-49bc6f3 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-a54b003 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-a54b003 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c8fd5a8 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-c8fd5a8 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-9b3faf5 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-9b3faf5 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d814208 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-d814208 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-49bc6f3 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-49bc6f3 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-a54b003 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-a54b003 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c8fd5a8 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-c8fd5a8 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-9b3faf5 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-9b3faf5 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d814208 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-d814208 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-49bc6f3 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-49bc6f3 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-a54b003 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-a54b003 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c8fd5a8 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-c8fd5a8 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-9b3faf5 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-9b3faf5 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d814208 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-d814208 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-49bc6f3 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-49bc6f3 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-a54b003 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-a54b003 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c8fd5a8 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-c8fd5a8 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-9b3faf5 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-9b3faf5 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d814208 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-d814208 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-49bc6f3 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-49bc6f3 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-a54b003 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-a54b003 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c8fd5a8 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-c8fd5a8 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-9b3faf5 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-9b3faf5 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d814208 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-d814208 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-49bc6f3 *//* ————————————————————————————— */ /* 1) Limpiamos el contenedor gris */ /* El contenedor del widget (wrapper) */ .hero-button { background: none !important; padding: 0 !important; box-shadow: none !important; } /* ————————————————————————————— */ /* 2) Estilizamos el real dentro del wrapper */ /* Usamos el .elementor-1765 .elementor-element.elementor-element-49bc6f3 .hero-button .elementor-button */ .hero-button .elementor-button { display: inline-block; padding: 0.8em 2.2em; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; cursor: pointer; position: relative; overflow: hidden; } /* 3) Shine effect */ .hero-button .elementor-button::before { content: ""; position: absolute; top: -100%; left: -45%; width: 50%; height: 250%; background: rgba(255,255,255,0.3); transform: rotate(25deg); transition: all .7s ease; } .hero-button .elementor-button:hover::before { top: -10%; left: 120%; } /* 4) Hover: cambio de degradado + elevación */ .hero-button .elementor-button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #F1BD87 0%, #F1BD87 100%); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } /* 5) Active / Focus */ .hero-button .elementor-button:active, .hero-button .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); outline: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-3e633f1 *//* Base común */ .social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 1em 2em; font-size: 1.1rem; font-weight: 600; color: white; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.15); text-decoration: none; text-align: center; } /* Iconos dentro */ .social-btn i { font-size: 1.5rem; } /* INSTAGRAM */ .social-instagram { background: linear-gradient(135deg, #feda75, #d62976, #962fbf); } .social-instagram:hover { transform: scale(1.05); } /* TIKTOK */ .social-tiktok { background: linear-gradient(135deg, #00f2ea, #ff0050); } .social-tiktok:hover { transform: scale(1.05); } /* FACEBOOK */ .social-facebook { background: #1877f2; } .social-facebook:hover { background: #145dcf; transform: scale(1.05); }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-cf010c5 *//* Base común */ .social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 1em 2em; font-size: 1.1rem; font-weight: 600; color: white; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.15); text-decoration: none; text-align: center; } /* Iconos dentro */ .social-btn i { font-size: 1.5rem; } /* INSTAGRAM */ .social-instagram { background: linear-gradient(135deg, #feda75, #d62976, #962fbf); } .social-instagram:hover { transform: scale(1.05); } /* TIKTOK */ .social-tiktok { background: linear-gradient(135deg, #00f2ea, #ff0050); } .social-tiktok:hover { transform: scale(1.05); } /* FACEBOOK */ .social-facebook { background: #1877f2; } .social-facebook:hover { background: #145dcf; transform: scale(1.05); }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-440c0f6 *//* Base común */ .social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 1em 2em; font-size: 1.1rem; font-weight: 600; color: white; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.15); text-decoration: none; text-align: center; } /* Iconos dentro */ .social-btn i { font-size: 1.5rem; } /* INSTAGRAM */ .social-instagram { background: linear-gradient(135deg, #feda75, #d62976, #962fbf); } .social-instagram:hover { transform: scale(1.05); } /* TIKTOK */ .social-tiktok { background: linear-gradient(135deg, #00f2ea, #ff0050); } .social-tiktok:hover { transform: scale(1.05); } /* FACEBOOK */ .social-facebook { background: #1877f2; } .social-facebook:hover { background: #145dcf; transform: scale(1.05); }/* End custom CSS */