.elementor-527 .elementor-element.elementor-element-5750f41{--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;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:390px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-5750f41:not(.elementor-motion-effects-element-type-background), .elementor-527 .elementor-element.elementor-element-5750f41 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://stratekindustries.com/wp-content/uploads/2025/08/BANNER-STRATEK.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-527 .elementor-element.elementor-element-5750f41::before, .elementor-527 .elementor-element.elementor-element-5750f41 > .elementor-background-video-container::before, .elementor-527 .elementor-element.elementor-element-5750f41 > .e-con-inner > .elementor-background-video-container::before, .elementor-527 .elementor-element.elementor-element-5750f41 > .elementor-background-slideshow::before, .elementor-527 .elementor-element.elementor-element-5750f41 > .e-con-inner > .elementor-background-slideshow::before, .elementor-527 .elementor-element.elementor-element-5750f41 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-astglobalcolor7 );--background-overlay:'';}.elementor-527 .elementor-element.elementor-element-6565d5e{--display:flex;--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-527 .elementor-element.elementor-element-cde326f > .elementor-widget-container{padding:0px 0px 25px 0px;}.elementor-527 .elementor-element.elementor-element-cde326f{text-align:center;}.elementor-527 .elementor-element.elementor-element-cde326f .elementor-heading-title{color:#FFFFFF;}.elementor-527 .elementor-element.elementor-element-d755c3c > .elementor-widget-container{padding:0px 0px 15px 0px;}.elementor-527 .elementor-element.elementor-element-d755c3c{text-align:center;}.elementor-527 .elementor-element.elementor-element-d755c3c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-527 .elementor-element.elementor-element-9747c91 .elementor-button{background-color:#4B5D7C80;font-family:"Poppins", Sans-serif;font-weight:500;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-7978d0eb );border-radius:36px 36px 36px 36px;}.elementor-527 .elementor-element.elementor-element-9747c91 .elementor-button:hover, .elementor-527 .elementor-element.elementor-element-9747c91 .elementor-button:focus{background-color:#2C3E508C;color:var( --e-global-color-primary );}.elementor-527 .elementor-element.elementor-element-9747c91 > .elementor-widget-container{border-style:none;border-radius:-10px -10px -10px -10px;}.elementor-527 .elementor-element.elementor-element-9747c91 .elementor-button:hover svg, .elementor-527 .elementor-element.elementor-element-9747c91 .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-527 .elementor-element.elementor-element-a77bd7f > .elementor-widget-container{padding:340px 0px 50px 0px;}.elementor-527 .elementor-element.elementor-element-a77bd7f .elementor-icon-wrapper{text-align:center;}.elementor-527 .elementor-element.elementor-element-a77bd7f.elementor-view-stacked .elementor-icon{background-color:#F9F8F8A6;}.elementor-527 .elementor-element.elementor-element-a77bd7f.elementor-view-framed .elementor-icon, .elementor-527 .elementor-element.elementor-element-a77bd7f.elementor-view-default .elementor-icon{color:#F9F8F8A6;border-color:#F9F8F8A6;}.elementor-527 .elementor-element.elementor-element-a77bd7f.elementor-view-framed .elementor-icon, .elementor-527 .elementor-element.elementor-element-a77bd7f.elementor-view-default .elementor-icon svg{fill:#F9F8F8A6;}.elementor-527 .elementor-element.elementor-element-a77bd7f .elementor-icon{font-size:30px;}.elementor-527 .elementor-element.elementor-element-a77bd7f .elementor-icon svg{height:30px;}.elementor-527 .elementor-element.elementor-element-f45bf38{--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;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:150px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-7230e4a{--display:flex;--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-527 .elementor-element.elementor-element-6b9e9dd{text-align:center;}.elementor-527 .elementor-element.elementor-element-6b9e9dd .elementor-heading-title{font-size:22px;color:#4B5D7C;}.elementor-527 .elementor-element.elementor-element-c1f8a7b > .elementor-widget-container{padding:0px 125px 25px 125px;}.elementor-527 .elementor-element.elementor-element-c1f8a7b{text-align:center;}.elementor-527 .elementor-element.elementor-element-c1f8a7b .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:2.5em;font-weight:700;color:var( --e-global-color-secondary );}.elementor-527 .elementor-element.elementor-element-8af03a4{text-align:center;font-size:1.1em;color:var( --e-global-color-text );}.elementor-527 .elementor-element.elementor-element-a300412 .elementor-button{background-color:#4B5D7C00;font-family:"Poppins", Sans-serif;font-weight:500;fill:var( --e-global-color-text );color:var( --e-global-color-text );box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);border-style:solid;border-width:1px 1px 1px 1px;border-color:#4B5D7C;border-radius:36px 36px 36px 36px;}.elementor-527 .elementor-element.elementor-element-a300412 .elementor-button:hover, .elementor-527 .elementor-element.elementor-element-a300412 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-primary );}.elementor-527 .elementor-element.elementor-element-a300412 > .elementor-widget-container{border-style:none;border-radius:-10px -10px -10px -10px;}.elementor-527 .elementor-element.elementor-element-a300412 .elementor-button:hover svg, .elementor-527 .elementor-element.elementor-element-a300412 .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-527 .elementor-element.elementor-element-e025717{--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;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.64;--padding-top:150px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-e025717:not(.elementor-motion-effects-element-type-background), .elementor-527 .elementor-element.elementor-element-e025717 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://stratekindustries.com/wp-content/uploads/2025/08/Fabtab-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-527 .elementor-element.elementor-element-e025717::before, .elementor-527 .elementor-element.elementor-element-e025717 > .elementor-background-video-container::before, .elementor-527 .elementor-element.elementor-element-e025717 > .e-con-inner > .elementor-background-video-container::before, .elementor-527 .elementor-element.elementor-element-e025717 > .elementor-background-slideshow::before, .elementor-527 .elementor-element.elementor-element-e025717 > .e-con-inner > .elementor-background-slideshow::before, .elementor-527 .elementor-element.elementor-element-e025717 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-astglobalcolor7 );--background-overlay:'';}.elementor-527 .elementor-element.elementor-element-2a4bcb1{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:100px;}.elementor-527 .elementor-element.elementor-element-a7ac2cd > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-527 .elementor-element.elementor-element-a7ac2cd{text-align:left;}.elementor-527 .elementor-element.elementor-element-a7ac2cd .elementor-heading-title{color:#FFFFFFEB;}.elementor-527 .elementor-element.elementor-element-19fb232{text-align:left;}.elementor-527 .elementor-element.elementor-element-19fb232 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;color:#FFFFFF;}.elementor-527 .elementor-element.elementor-element-649099a{font-size:16px;color:#E6E6E6;}.elementor-527 .elementor-element.elementor-element-f22d729{--divider-border-style:solid;--divider-color:#FFFFFF87;--divider-border-width:1px;}.elementor-527 .elementor-element.elementor-element-f22d729 .elementor-divider-separator{width:100%;margin:0 auto;margin-left:0;}.elementor-527 .elementor-element.elementor-element-f22d729 .elementor-divider{text-align:left;padding-block-start:15px;padding-block-end:15px;}.elementor-527 .elementor-element.elementor-element-3b6e6ed{text-align:left;}.elementor-527 .elementor-element.elementor-element-3b6e6ed .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;color:#FFFFFF;}.elementor-527 .elementor-element.elementor-element-df0ed9f{font-size:16px;color:#FFFFFF;}.elementor-527 .elementor-element.elementor-element-44b3c14{--divider-border-style:solid;--divider-color:#FFFFFF87;--divider-border-width:1px;}.elementor-527 .elementor-element.elementor-element-44b3c14 > .elementor-widget-container{margin:-20px 0px 0px 0px;}.elementor-527 .elementor-element.elementor-element-44b3c14 .elementor-divider-separator{width:100%;margin:0 auto;margin-left:0;}.elementor-527 .elementor-element.elementor-element-44b3c14 .elementor-divider{text-align:left;padding-block-start:15px;padding-block-end:15px;}.elementor-527 .elementor-element.elementor-element-c3e0eab{text-align:left;}.elementor-527 .elementor-element.elementor-element-c3e0eab .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;color:#FFFFFFEB;}.elementor-527 .elementor-element.elementor-element-c13d548{font-size:16px;color:#FFFFFF;}.elementor-527 .elementor-element.elementor-element-31108e6{--divider-border-style:solid;--divider-color:#FFFFFF87;--divider-border-width:1px;}.elementor-527 .elementor-element.elementor-element-31108e6 .elementor-divider-separator{width:100%;margin:0 auto;margin-left:0;}.elementor-527 .elementor-element.elementor-element-31108e6 .elementor-divider{text-align:left;padding-block-start:15px;padding-block-end:15px;}.elementor-527 .elementor-element.elementor-element-a425c2a{text-align:left;}.elementor-527 .elementor-element.elementor-element-a425c2a .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;color:#FFFFFFEB;}.elementor-527 .elementor-element.elementor-element-affef07{font-size:16px;color:#FFFFFF;}.elementor-527 .elementor-element.elementor-element-d53a39b{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:75px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-735c99e{font-family:"Poppins", Sans-serif;font-size:16px;color:#FFFFFF;}.elementor-527 .elementor-element.elementor-element-d3601a2 .elementor-button{background-color:#4B5D7C80;font-family:"Poppins", Sans-serif;font-weight:500;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-7978d0eb );border-radius:10px 10px 10px 10px;}.elementor-527 .elementor-element.elementor-element-d3601a2 .elementor-button:hover, .elementor-527 .elementor-element.elementor-element-d3601a2 .elementor-button:focus{background-color:#2C3E508C;color:var( --e-global-color-primary );}.elementor-527 .elementor-element.elementor-element-d3601a2 > .elementor-widget-container{border-style:none;border-radius:-10px -10px -10px -10px;}.elementor-527 .elementor-element.elementor-element-d3601a2 .elementor-button:hover svg, .elementor-527 .elementor-element.elementor-element-d3601a2 .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-527 .elementor-element.elementor-element-ad6984f{--display:flex;--justify-content:center;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-ad6984f:not(.elementor-motion-effects-element-type-background), .elementor-527 .elementor-element.elementor-element-ad6984f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-527 .elementor-element.elementor-element-92774d9{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-65792cb > .elementor-widget-container{padding:0px 125px 25px 125px;}.elementor-527 .elementor-element.elementor-element-65792cb{text-align:center;}.elementor-527 .elementor-element.elementor-element-65792cb .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:2.5em;font-weight:700;color:var( --e-global-color-secondary );}.elementor-527 .elementor-element.elementor-element-c5a42b1{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-527 .elementor-element.elementor-element-c5a42b1:not(.elementor-motion-effects-element-type-background), .elementor-527 .elementor-element.elementor-element-c5a42b1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-527 .elementor-element.elementor-element-5750f41{--padding-top:200px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}.elementor-527 .elementor-element.elementor-element-a77bd7f > .elementor-widget-container{padding:100px 0px 50px 0px;}.elementor-527 .elementor-element.elementor-element-f45bf38{--padding-top:100px;--padding-bottom:100px;--padding-left:25px;--padding-right:25px;}.elementor-527 .elementor-element.elementor-element-c1f8a7b > .elementor-widget-container{padding:0px 0px 25px 0px;}.elementor-527 .elementor-element.elementor-element-8af03a4{text-align:left;}.elementor-527 .elementor-element.elementor-element-e025717{--padding-top:100px;--padding-bottom:100px;--padding-left:25px;--padding-right:25px;}.elementor-527 .elementor-element.elementor-element-2a4bcb1{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-d53a39b{--margin-top:35px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-ad6984f{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:25px;--padding-bottom:25px;--padding-left:20px;--padding-right:20px;}.elementor-527 .elementor-element.elementor-element-65792cb > .elementor-widget-container{padding:0px 0px 25px 0px;}.elementor-527 .elementor-element.elementor-element-c5a42b1{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-527 .elementor-element.elementor-element-5750f41{--padding-top:150px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-527 .elementor-element.elementor-element-6565d5e{--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-527 .elementor-element.elementor-element-cde326f > .elementor-widget-container{padding:0px 0px 10px 0px;}.elementor-527 .elementor-element.elementor-element-d755c3c > .elementor-widget-container{padding:0px 0px 5px 0px;}.elementor-527 .elementor-element.elementor-element-a77bd7f > .elementor-widget-container{padding:75px 0px 25px 0px;}.elementor-527 .elementor-element.elementor-element-f45bf38{--padding-top:75px;--padding-bottom:75px;--padding-left:20px;--padding-right:20px;}.elementor-527 .elementor-element.elementor-element-c1f8a7b > .elementor-widget-container{padding:0px 25px 10px 25px;}.elementor-527 .elementor-element.elementor-element-e025717:not(.elementor-motion-effects-element-type-background), .elementor-527 .elementor-element.elementor-element-e025717 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://stratekindustries.com/wp-content/uploads/2025/08/Fabtab-1.jpg");}.elementor-527 .elementor-element.elementor-element-e025717{--padding-top:75px;--padding-bottom:75px;--padding-left:20px;--padding-right:20px;}.elementor-527 .elementor-element.elementor-element-a7ac2cd{text-align:center;}.elementor-527 .elementor-element.elementor-element-19fb232 .elementor-heading-title{font-size:18px;}.elementor-527 .elementor-element.elementor-element-649099a > .elementor-widget-container{padding:0px 25px 0px 0px;}.elementor-527 .elementor-element.elementor-element-3b6e6ed .elementor-heading-title{font-size:18px;}.elementor-527 .elementor-element.elementor-element-df0ed9f > .elementor-widget-container{padding:0px 25px 0px 0px;}.elementor-527 .elementor-element.elementor-element-c3e0eab .elementor-heading-title{font-size:18px;}.elementor-527 .elementor-element.elementor-element-c13d548 > .elementor-widget-container{padding:0px 25px 0px 0px;}.elementor-527 .elementor-element.elementor-element-a425c2a .elementor-heading-title{font-size:18px;}.elementor-527 .elementor-element.elementor-element-affef07 > .elementor-widget-container{padding:0px 25px 0px 0px;}.elementor-527 .elementor-element.elementor-element-d53a39b{--width:100%;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:15px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-527 .elementor-element.elementor-element-735c99e > .elementor-widget-container{padding:0px 25px 0px 0px;}.elementor-527 .elementor-element.elementor-element-735c99e{text-align:center;line-height:1.1em;}.elementor-527 .elementor-element.elementor-element-ad6984f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-527 .elementor-element.elementor-element-92774d9{--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-527 .elementor-element.elementor-element-65792cb > .elementor-widget-container{padding:0px 25px 10px 25px;}.elementor-527 .elementor-element.elementor-element-c5a42b1{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}@media(min-width:768px){.elementor-527 .elementor-element.elementor-element-5750f41{--content-width:950px;}.elementor-527 .elementor-element.elementor-element-f45bf38{--content-width:900px;}.elementor-527 .elementor-element.elementor-element-2a4bcb1{--width:50%;}.elementor-527 .elementor-element.elementor-element-d53a39b{--width:50%;}.elementor-527 .elementor-element.elementor-element-ad6984f{--content-width:1140px;}.elementor-527 .elementor-element.elementor-element-92774d9{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-527 .elementor-element.elementor-element-92774d9{--width:70%;}}@media(min-width:1025px){.elementor-527 .elementor-element.elementor-element-5750f41:not(.elementor-motion-effects-element-type-background), .elementor-527 .elementor-element.elementor-element-5750f41 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}.elementor-527 .elementor-element.elementor-element-e025717:not(.elementor-motion-effects-element-type-background), .elementor-527 .elementor-element.elementor-element-e025717 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for html, class: .elementor-element-75a1275 */.mi-tarjeta-wrapper {
  display: flex;           /* activa flexbox */
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  width: 100%;             /* ocupa todo el ancho del contenedor padre */
  height: 100%;            /* opcional: ajusta según la altura del contenedor */
}




/* Botón oculto por defecto */
.boton-hover {
  opacity: 0;               /* no se ve inicialmente */
  pointer-events: none;      /* no clicable mientras está oculto */
  padding: 10px 35px;
  font-size: 16px;
  background: transparent;   /* fondo transparente */
  color: white;              /* texto blanco */
  border: 1px solid white;   /* borde blanco delgado */
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease; 
  transform: translateY(10px); /* empieza ligeramente abajo */
  position: relative;
  z-index: 10;              /* que quede sobre overlay */
  box-sizing: border-box;    /* asegura que el borde no se corte */
}

/* Cuando el cursor está sobre la tarjeta */
.particle-deconstruct-element:hover .boton-hover {
  opacity: 1;                /* aparece */
  pointer-events: auto;       /* clic habilitado */
  transform: translateY(0);   /* sube suavemente */
  background: rgba(255, 255, 255, 0); /* fondo blanco sutil */
  border: 1px solid white ;    /* borde delgado visible */
  color: white;               /* texto blanco */
}

/* Hover solo sobre el botón */
.boton-hover:hover {
  background: rgba(255,255,255,0.5); /* ejemplo: fondo más visible */
  border: 0.2px solid white;           /* borde se mantiene */
  color: black;                       /* texto */
}



/* Si quieres un efecto de movimiento de abajo hacia arriba */
.boton-hover {
  transform: translateY(10px); /* empieza ligeramente abajo */
}

.particle-deconstruct-element:hover .boton-hover {
  transform: translateY(0);   /* sube suavemente al aparecer */
}




/* Contenedor tarjeta */
.particle-deconstruct-element {
  position: relative;
  width: 450px;
  height: 450px;
  overflow: hidden;
  border-radius: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease;
  color: #fff;
  
}

/* Hover: leve levantamiento */
.particle-deconstruct-element:hover {
  transform: translateY(-5px);
}

/* Imagen de fondo */
.particle-deconstruct-element .bg-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://stratekindustries.com/wp-content/uploads/2025/08/banner-quienes-somos_cleanup.png');
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease, filter 0.7s ease;
  z-index: 0;
}

/* Overlay para oscurecer fondo */
.particle-deconstruct-element .overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-color: rgba(0,0,0,0.2);
  transition: background-color 0.7s ease;
  z-index: 1;
}

/* Contenedor de contenido */
.particle-deconstruct-element .content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* contenido empieza abajo */
  align-items: center;       /* centrado horizontal */
  box-sizing: border-box;
}

/* Título inicial */
.particle-deconstruct-element .title {
  transform: translateY(125px); /* empieza más abajo */
  opacity: 1;
  transition: transform 1.2s ease-out, opacity 0.7s ease-out;
  margin: 0 0 10px 0;
  text-align: center;        /* centrado */
  font-size: 2rem;
  font-weight: 400;          /* sin negrita */
  color: #CBD1D7;
  text-shadow: 2px 2px 6px rgba(0,0,0,20); /* sombra suave */
  
 
}

/* Lista de texto inicialmente oculta */
.particle-deconstruct-element .text-content {
  opacity: 0;
  transform: translateY(20px); /* empieza debajo */
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
  margin: 0;
  padding-left: 0;
  list-style: none;           /* quitar bullets por defecto */
  font-size: 0.9rem;
  font-weight: 400;           /* sin negrita */
  color: #fff;
  line-height: 1.3em;         /* espaciado más compacto */
}

/* Iconos personalizados en lista */
.particle-deconstruct-element .text-content li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;         /* espacio entre elementos */
}

.particle-deconstruct-element .text-content li .icon {
  margin-right: 8px;
  color: #00ffff;             /* color del icono, puedes cambiarlo */
  flex-shrink: 0;
}

.particle-deconstruct-element .text-content li .icon svg {
  color: #fff;  /* color del icono */
  width: 16px;     /* tamaño */
  height: 16px;
  margin-right: 6px; /* espacio entre icono y texto */
}

/* Hover: zoom fondo y oscurecer */
.particle-deconstruct-element:hover .bg-image {
  transform: scale(1.2);
  filter: brightness(0.5);
}

/* Hover: overlay más oscuro */
.particle-deconstruct-element:hover .overlay {
  background-color: rgba(0,0,0,0.5);
}

/* Hover: título sube */
.particle-deconstruct-element:hover .title {
  transform: translateY(-20px);
  color: #fff; /* color al pasar el hover o tocar */
}

/* Hover: mostrar texto y subirlo */
.particle-deconstruct-element:hover .text-content {
  opacity: 1;
  transform: translateY(-10px);
  transition-delay: 0.3s;
}

/* Al quitar hover, título y texto bajan y desaparecen suavemente */
.particle-deconstruct-element .title,
.particle-deconstruct-element .text-content {
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}





@media (max-width: 1024px) {
  .particle-deconstruct-element {
    width: 100%;
    height: 320px;
  }
  .particle-deconstruct-element .title {
    font-size: 1.4rem;
    transform: translateY(125px); /* título inicia más abajo */
  }
  .particle-deconstruct-element:hover .title {
    transform: translateY(-10px); /* sube menos que en desktop */
  }
  .particle-deconstruct-element .text-content {
    font-size: 0.85rem;
    transform: translateY(30px); /* inicia más abajo */
  }
  .particle-deconstruct-element:hover .text-content {
    transform: translateY(-5px); /* sube menos */
  }
}

/* Móviles */
@media (max-width: 768px) {
  .particle-deconstruct-element {
    width: 90%;
    height: auto;
  }

  .particle-deconstruct-element .title {
    font-size: 1.3rem;
    transform: translateY(140px); /* inicio más abajo */
    transition: transform 1.1s ease-out, opacity 0.8s ease-out; /* un poco más lenta */
  }

  .particle-deconstruct-element:hover .title,
  .particle-deconstruct-element:active .title {
    transform: translateY(-5px); /* sube poco */
  }

  .particle-deconstruct-element .text-content {
    font-size: 0.8rem;
    transform: translateY(25px); /* inicio más abajo */
    transition: transform 1.2s ease-out, opacity 1.2s ease-out; /* más lenta que desktop */
  }

  .particle-deconstruct-element:hover .text-content,
  .particle-deconstruct-element:active .text-content {
    transform: translateY(0px); /* sube suavemente */
    opacity: 1;
  }


}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4f5aa8e */.mi-tarjeta-wrapper {
  display: flex;           /* activa flexbox */
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  width: 100%;             /* ocupa todo el ancho del contenedor padre */
  height: 100%;            /* opcional: ajusta según la altura del contenedor */
}


.tarjeta2 .bg-image {
  background-image: url('https://stratekindustries.com/wp-content/uploads/2025/08/tarjeta-sistemas-electricos.png') !important;
}

/* Botón oculto por defecto */
.boton-hover {
  opacity: 0;               /* no se ve inicialmente */
  pointer-events: none;      /* no clicable mientras está oculto */
  padding: 10px 35px;
  font-size: 16px;
  background: transparent;   /* fondo transparente */
  color: white;              /* texto blanco */
  border: 1px solid white;   /* borde blanco delgado */
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease; 
  transform: translateY(10px); /* empieza ligeramente abajo */
  position: relative;
  z-index: 10;              /* que quede sobre overlay */
  box-sizing: border-box;    /* asegura que el borde no se corte */
}

/* Cuando el cursor está sobre la tarjeta */
.particle-deconstruct-element:hover .boton-hover {
  opacity: 1;                /* aparece */
  pointer-events: auto;       /* clic habilitado */
  transform: translateY(0);   /* sube suavemente */
  background: rgba(255, 255, 255, 0); /* fondo blanco sutil */
  border: 1px solid white ;    /* borde delgado visible */
  color: white;               /* texto blanco */
}

/* Hover solo sobre el botón */
.boton-hover:hover {
  background: rgba(255,255,255,0.5); /* ejemplo: fondo más visible */
  border: 0.2px solid white;           /* borde se mantiene */
  color: black;                       /* texto */
}



/* Si quieres un efecto de movimiento de abajo hacia arriba */
.boton-hover {
  opacity: 0;               
  pointer-events: none;      
  padding: 10px 20px;       /* <- aquí defines el tamaño del botón */
  font-size: 16px;           /* <- tamaño del texto */
  background: transparent;   
  color: white;              
  border: 1px solid white;   
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease; 
  transform: translateY(10px); 
  position: relative;
  z-index: 10;              
  box-sizing: border-box;    
}

.particle-deconstruct-element:hover .boton-hover {
  transform: translateY(0);   /* sube suavemente al aparecer */
}




/* Contenedor tarjeta */
.particle-deconstruct-element {
  position: relative;
  width: 450px;
  height: 450px;
  overflow: hidden;
  border-radius: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease;
  color: #fff;
  
}

/* Hover: leve levantamiento */
.particle-deconstruct-element:hover {
  transform: translateY(-5px);
}

/* Imagen de fondo */
.particle-deconstruct-element .bg-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://stratekindustries.com/wp-content/uploads/2025/08/fabricacion-de-tableros-tarjeta.png');
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease, filter 0.7s ease;
  z-index: 0;
}

/* Overlay para oscurecer fondo */
.particle-deconstruct-element .overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-color: rgba(0,0,0,0.2);
  transition: background-color 0.7s ease;
  z-index: 1;
}

/* Contenedor de contenido */
.particle-deconstruct-element .content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* contenido empieza abajo */
  align-items: center;       /* centrado horizontal */
  box-sizing: border-box;
}

/* Título inicial */
.particle-deconstruct-element .title {
  transform: translateY(100px); /* empieza más abajo */
  opacity: 1;
  transition: transform 1.2s ease-out, opacity 0.7s ease-out;
  margin: 0 0 10px 0;
  text-align: center;        /* centrado */
  font-size: 2rem;
  font-weight: 400;          /* sin negrita */
  color: #CBD1D7;
  text-shadow: 2px 2px 6px rgba(0,0,0,20); /* sombra suave */
  
 
}

/* Lista de texto inicialmente oculta */
.particle-deconstruct-element .text-content {
  opacity: 0;
  transform: translateY(20px); /* empieza debajo */
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
  margin: 0;
  padding-left: 0;
  list-style: none;           /* quitar bullets por defecto */
  font-size: 0.9rem;
  font-weight: 400;           /* sin negrita */
  color: #fff;
  line-height: 1.3em;         /* espaciado más compacto */
}

/* Iconos personalizados en lista */
.particle-deconstruct-element .text-content li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;         /* espacio entre elementos */
}

.particle-deconstruct-element .text-content li .icon {
  margin-right: 8px;
  color: #00ffff;             /* color del icono, puedes cambiarlo */
  flex-shrink: 0;
}

.particle-deconstruct-element .text-content li .icon svg {
  color: #fff;  /* color del icono */
  width: 16px;     /* tamaño */
  height: 16px;
  margin-right: 6px; /* espacio entre icono y texto */
}

/* Hover: zoom fondo y oscurecer */
.particle-deconstruct-element:hover .bg-image {
  transform: scale(1.2);
  filter: brightness(0.5);
}

/* Hover: overlay más oscuro */
.particle-deconstruct-element:hover .overlay {
  background-color: rgba(0,0,0,0.5);
}

/* Hover: título sube */
.particle-deconstruct-element:hover .title {
  transform: translateY(-20px);
  color: #fff; /* color al pasar el hover o tocar */
}

/* Hover: mostrar texto y subirlo */
.particle-deconstruct-element:hover .text-content {
  opacity: 1;
  transform: translateY(-10px);
  transition-delay: 0.3s;
}

/* Al quitar hover, título y texto bajan y desaparecen suavemente */
.particle-deconstruct-element .title,
.particle-deconstruct-element .text-content {
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}





@media (max-width: 1024px) {
  .particle-deconstruct-element {
    width: 100%;
    height: 320px;
  }
  .particle-deconstruct-element .title {
    font-size: 1.4rem;
    transform: translateY(125px); /* título inicia más abajo */
  }
  .particle-deconstruct-element:hover .title {
    transform: translateY(-10px); /* sube menos que en desktop */
  }
  .particle-deconstruct-element .text-content {
    font-size: 0.85rem;
    transform: translateY(30px); /* inicia más abajo */
  }
  .particle-deconstruct-element:hover .text-content {
    transform: translateY(-5px); /* sube menos */
  }
}

/* Móviles */
@media (max-width: 768px) {
  .particle-deconstruct-element {
    width: 90%;
    height: 300px;
  }

  .particle-deconstruct-element .title {
    font-size: 1.3rem;
    transform: translateY(100px); /* inicio más abajo */
    transition: transform 1.1s ease-out, opacity 0.8s ease-out; /* un poco más lenta */
  }

  .particle-deconstruct-element:hover .title,
  .particle-deconstruct-element:active .title {
    transform: translateY(-5px); /* sube poco */
  }

  .particle-deconstruct-element .text-content {
    font-size: 0.8rem;
    transform: translateY(25px); /* inicio más abajo */
    transition: transform 1.2s ease-out, opacity 1.2s ease-out; /* más lenta que desktop */
  }

  .particle-deconstruct-element:hover .text-content,
  .particle-deconstruct-element:active .text-content {
    transform: translateY(0px); /* sube suavemente */
    opacity: 1;
  }


}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4d6288a */.mi-tarjeta-wrapper {
  display: flex;           /* activa flexbox */
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  width: 100%;             /* ocupa todo el ancho del contenedor padre */
  height: 100%;            /* opcional: ajusta según la altura del contenedor */
}


.tarjeta3 .bg-image {
  background-image: url('https://stratekindustries.com/wp-content/uploads/2025/08/tarjeta-video-vigilancia.png') !important;
}

/* Botón oculto por defecto */
.boton-hover {
  opacity: 0;               /* no se ve inicialmente */
  pointer-events: none;      /* no clicable mientras está oculto */
  padding: 10px 35px;
  font-size: 16px;
  background: transparent;   /* fondo transparente */
  color: white;              /* texto blanco */
  border: 1px solid white;   /* borde blanco delgado */
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease; 
  transform: translateY(10px); /* empieza ligeramente abajo */
  position: relative;
  z-index: 10;              /* que quede sobre overlay */
  box-sizing: border-box;    /* asegura que el borde no se corte */
}

/* Cuando el cursor está sobre la tarjeta */
.particle-deconstruct-element:hover .boton-hover {
  opacity: 1;                /* aparece */
  pointer-events: auto;       /* clic habilitado */
  transform: translateY(0);   /* sube suavemente */
  background: rgba(255, 255, 255, 0); /* fondo blanco sutil */
  border: 1px solid white ;    /* borde delgado visible */
  color: white;               /* texto blanco */
}

/* Hover solo sobre el botón */
.boton-hover:hover {
  background: rgba(255,255,255,0.5); /* ejemplo: fondo más visible */
  border: 0.2px solid white;           /* borde se mantiene */
  color: black;                       /* texto */
}



/* Si quieres un efecto de movimiento de abajo hacia arriba */
.boton-hover {
  opacity: 0;               
  pointer-events: none;      
  padding: 10px 20px;       /* <- aquí defines el tamaño del botón */
  font-size: 16px;           /* <- tamaño del texto */
  background: transparent;   
  color: white;              
  border: 1px solid white;   
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease; 
  transform: translateY(10px); 
  position: relative;
  z-index: 10;              
  box-sizing: border-box;    
}

.particle-deconstruct-element:hover .boton-hover {
  transform: translateY(0);   /* sube suavemente al aparecer */
}




/* Contenedor tarjeta */
.particle-deconstruct-element {
  position: relative;
  width: 450px;
  height: 450px;
  overflow: hidden;
  border-radius: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease;
  color: #fff;
  
}

/* Hover: leve levantamiento */
.particle-deconstruct-element:hover {
  transform: translateY(-5px);
}

/* Imagen de fondo */
.particle-deconstruct-element .bg-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://stratekindustries.com/wp-content/uploads/2025/08/monitoreo-planta-solar.jpg');
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease, filter 0.7s ease;
  z-index: 0;
}

/* Overlay para oscurecer fondo */
.particle-deconstruct-element .overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-color: rgba(0,0,0,0.2);
  transition: background-color 0.7s ease;
  z-index: 1;
}

/* Contenedor de contenido */
.particle-deconstruct-element .content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* contenido empieza abajo */
  align-items: center;       /* centrado horizontal */
  box-sizing: border-box;
}

/* Título inicial */
.particle-deconstruct-element .title {
  transform: translateY(80px); /* empieza más abajo */
  opacity: 1;
  transition: transform 1.2s ease-out, opacity 0.7s ease-out;
  margin: 0 0 10px 0;
  text-align: center;        /* centrado */
  font-size: 2rem;
  font-weight: 400;          /* sin negrita */
  color: #CBD1D7;
  text-shadow: 2px 2px 6px rgba(0,0,0,20); /* sombra suave */
  
 
}

/* Lista de texto inicialmente oculta */
.particle-deconstruct-element .text-content {
  opacity: 0;
  transform: translateY(20px); /* empieza debajo */
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
  margin: 0;
  padding-left: 0;
  list-style: none;           /* quitar bullets por defecto */
  font-size: 0.9rem;
  font-weight: 400;           /* sin negrita */
  color: #fff;
  line-height: 1.3em;         /* espaciado más compacto */
}

/* Iconos personalizados en lista */
.particle-deconstruct-element .text-content li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;         /* espacio entre elementos */
}

.particle-deconstruct-element .text-content li .icon {
  margin-right: 8px;
  color: #00ffff;             /* color del icono, puedes cambiarlo */
  flex-shrink: 0;
}

.particle-deconstruct-element .text-content li .icon svg {
  color: #fff;  /* color del icono */
  width: 16px;     /* tamaño */
  height: 16px;
  margin-right: 6px; /* espacio entre icono y texto */
}

/* Hover: zoom fondo y oscurecer */
.particle-deconstruct-element:hover .bg-image {
  transform: scale(1.2);
  filter: brightness(0.5);
}

/* Hover: overlay más oscuro */
.particle-deconstruct-element:hover .overlay {
  background-color: rgba(0,0,0,0.5);
}

/* Hover: título sube */
.particle-deconstruct-element:hover .title {
  transform: translateY(-20px);
  color: #fff; /* color al pasar el hover o tocar */
}

/* Hover: mostrar texto y subirlo */
.particle-deconstruct-element:hover .text-content {
  opacity: 1;
  transform: translateY(-10px);
  transition-delay: 0.3s;
}

/* Al quitar hover, título y texto bajan y desaparecen suavemente */
.particle-deconstruct-element .title,
.particle-deconstruct-element .text-content {
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}





@media  (max-width: 1024px) {
  .particle-deconstruct-element {
    width: 100%;
    height: 320px;
  }
  .particle-deconstruct-element .title {
    font-size: 1.4rem;
    transform: translateY(100px) /* título inicia más abajo */
  }
  .particle-deconstruct-element:hover .title {
    transform: translateY(-10px); /* sube menos que en desktop */
    
  }
  .particle-deconstruct-element .text-content {
    font-size: 0.85rem;
    transform: translateY(30px); /* inicia más abajo */
  }
  .particle-deconstruct-element:hover .text-content {
    transform: translateY(-5px); /* sube menos */
  }
}

/* Móviles */
@media (max-width: 768px) {
  .particle-deconstruct-element {
    width: 90%;
    height: 300px;
  }

  .particle-deconstruct-element .title {
    font-size: 1.3rem;
    transform: translateY(100px); /* inicio más abajo */
    transition: transform 1.1s ease-out, opacity 0.8s ease-out; /* un poco más lenta */
  }

  .particle-deconstruct-element:hover .title,
  .particle-deconstruct-element:active .title {
    transform: translateY(-5px); /* sube poco */
  }

  .particle-deconstruct-element .text-content {
    font-size: 0.8rem;
    transform: translateY(25px); /* inicio más abajo */
    transition: transform 1.2s ease-out, opacity 1.2s ease-out; /* más lenta que desktop */
  }

  .particle-deconstruct-element:hover .text-content,
  .particle-deconstruct-element:active .text-content {
    transform: translateY(0px); /* sube suavemente */
    opacity: 1;
  }


}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1079a57 */.mi-tarjeta-wrapper {
  display: flex;           /* activa flexbox */
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  width: 100%;             /* ocupa todo el ancho del contenedor padre */
  height: 100%;            /* opcional: ajusta según la altura del contenedor */
}


.tarjeta4 .bg-image {
  background-image: url('https://stratekindustries.com/wp-content/uploads/2025/08/tarjeta-fibra-optica.png') !important;
}

/* Botón oculto por defecto */
.boton-hover {
  opacity: 0;               /* no se ve inicialmente */
  pointer-events: none;      /* no clicable mientras está oculto */
  padding: 10px 35px;
  font-size: 16px;
  background: transparent;   /* fondo transparente */
  color: white;              /* texto blanco */
  border: 1px solid white;   /* borde blanco delgado */
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease; 
  transform: translateY(10px); /* empieza ligeramente abajo */
  position: relative;
  z-index: 10;              /* que quede sobre overlay */
  box-sizing: border-box;    /* asegura que el borde no se corte */
}

/* Cuando el cursor está sobre la tarjeta */
.particle-deconstruct-element:hover .boton-hover {
  opacity: 1;                /* aparece */
  pointer-events: auto;       /* clic habilitado */
  transform: translateY(0);   /* sube suavemente */
  background: rgba(255, 255, 255, 0); /* fondo blanco sutil */
  border: 1px solid white ;    /* borde delgado visible */
  color: white;               /* texto blanco */
}

/* Hover solo sobre el botón */
.boton-hover:hover {
  background: rgba(255,255,255,0.5); /* ejemplo: fondo más visible */
  border: 0.2px solid white;           /* borde se mantiene */
  color: black;                       /* texto */
}



/* Si quieres un efecto de movimiento de abajo hacia arriba */
.boton-hover {
  opacity: 0;               
  pointer-events: none;      
  padding: 10px 20px;       /* <- aquí defines el tamaño del botón */
  font-size: 16px;           /* <- tamaño del texto */
  background: transparent;   
  color: white;              
  border: 1px solid white;   
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease; 
  transform: translateY(10px); 
  position: relative;
  z-index: 10;              
  box-sizing: border-box;    
}

.particle-deconstruct-element:hover .boton-hover {
  transform: translateY(0);   /* sube suavemente al aparecer */
}




/* Contenedor tarjeta */
.particle-deconstruct-element {
  position: relative;
  width: 450px;
  height: 450px;
  overflow: hidden;
  border-radius: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease;
  color: #fff;
  
}

/* Hover: leve levantamiento */
.particle-deconstruct-element:hover {
  transform: translateY(-5px);
}

/* Imagen de fondo */
.particle-deconstruct-element .bg-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://stratekindustries.com/wp-content/uploads/2025/08/monitoreo-planta-solar.jpg');
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease, filter 0.7s ease;
  z-index: 0;
}

/* Overlay para oscurecer fondo */
.particle-deconstruct-element .overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-color: rgba(0,0,0,0.2);
  transition: background-color 0.7s ease;
  z-index: 1;
}

/* Contenedor de contenido */
.particle-deconstruct-element .content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* contenido empieza abajo */
  align-items: center;       /* centrado horizontal */
  box-sizing: border-box;
}

/* Título inicial */
.particle-deconstruct-element .title {
  transform: translateY(100px); /* empieza más abajo */
  opacity: 1;
  transition: transform 1.2s ease-out, opacity 0.7s ease-out;
  margin: 0 0 10px 0;
  text-align: center;        /* centrado */
  font-size: 2rem;
  font-weight: 400;          /* sin negrita */
  color: #CBD1D7;
  text-shadow: 2px 2px 6px rgba(0,0,0,20); /* sombra suave */
  
 
}

/* Lista de texto inicialmente oculta */
.particle-deconstruct-element .text-content {
  opacity: 0;
  transform: translateY(20px); /* empieza debajo */
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
  margin: 0;
  padding-left: 0;
  list-style: none;           /* quitar bullets por defecto */
  font-size: 0.9rem;
  font-weight: 400;           /* sin negrita */
  color: #fff;
  line-height: 1.3em;         /* espaciado más compacto */
}

/* Iconos personalizados en lista */
.particle-deconstruct-element .text-content li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;         /* espacio entre elementos */
}

.particle-deconstruct-element .text-content li .icon {
  margin-right: 8px;
  color: #00ffff;             /* color del icono, puedes cambiarlo */
  flex-shrink: 0;
}

.particle-deconstruct-element .text-content li .icon svg {
  color: #fff;  /* color del icono */
  width: 16px;     /* tamaño */
  height: 16px;
  margin-right: 6px; /* espacio entre icono y texto */
}

/* Hover: zoom fondo y oscurecer */
.particle-deconstruct-element:hover .bg-image {
  transform: scale(1.2);
  filter: brightness(0.5);
}

/* Hover: overlay más oscuro */
.particle-deconstruct-element:hover .overlay {
  background-color: rgba(0,0,0,0.5);
}

/* Hover: título sube */
.particle-deconstruct-element:hover .title {
  transform: translateY(-20px);
  color: #fff; /* color al pasar el hover o tocar */
}

/* Hover: mostrar texto y subirlo */
.particle-deconstruct-element:hover .text-content {
  opacity: 1;
  transform: translateY(-10px);
  transition-delay: 0.3s;
}

/* Al quitar hover, título y texto bajan y desaparecen suavemente */
.particle-deconstruct-element .title,
.particle-deconstruct-element .text-content {
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}





@media (max-width: 1024px) {
  .particle-deconstruct-element {
    width: 100%;
    height: 320px;
  }
  .particle-deconstruct-element .title {
    font-size: 1.4rem;
    transform: translateY(125px); /* título inicia más abajo */
  }
  .particle-deconstruct-element:hover .title {
    transform: translateY(-10px); /* sube menos que en desktop */
  }
  .particle-deconstruct-element .text-content {
    font-size: 0.85rem;
    transform: translateY(30px); /* inicia más abajo */
  }
  .particle-deconstruct-element:hover .text-content {
    transform: translateY(-5px); /* sube menos */
  }
}

/* Móviles */
@media (max-width: 768px) {
  .particle-deconstruct-element {
    width: 90%;
    height: 300px;
  }

  .particle-deconstruct-element .title {
    font-size: 1.3rem;
    transform: translateY(100px); /* inicio más abajo */
    transition: transform 1.1s ease-out, opacity 0.8s ease-out; /* un poco más lenta */
  }

  .particle-deconstruct-element:hover .title,
  .particle-deconstruct-element:active .title {
    transform: translateY(-5px); /* sube poco */
  }

  .particle-deconstruct-element .text-content {
    font-size: 0.8rem;
    transform: translateY(25px); /* inicio más abajo */
    transition: transform 1.2s ease-out, opacity 1.2s ease-out; /* más lenta que desktop */
  }

  .particle-deconstruct-element:hover .text-content,
  .particle-deconstruct-element:active .text-content {
    transform: translateY(0px); /* sube suavemente */
    opacity: 1;
  }


}/* End custom CSS */