.elementor-1777 .elementor-element.elementor-element-d2906c1{--display:flex;--position:fixed;--min-height:185px;--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;top:0px;--z-index:1;}.elementor-1777 .elementor-element.elementor-element-d2906c1:not(.elementor-motion-effects-element-type-background), .elementor-1777 .elementor-element.elementor-element-d2906c1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000B5 20%, #00000000 100%);}.elementor-1777 .elementor-element.elementor-element-d2906c1.e-con{--align-self:flex-start;}body:not(.rtl) .elementor-1777 .elementor-element.elementor-element-d2906c1{left:0px;}body.rtl .elementor-1777 .elementor-element.elementor-element-d2906c1{right:0px;}.elementor-1777 .elementor-element.elementor-element-b41dfb2{--display:flex;--min-height:800px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;}.elementor-1777 .elementor-element.elementor-element-b41dfb2:not(.elementor-motion-effects-element-type-background), .elementor-1777 .elementor-element.elementor-element-b41dfb2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://tubesteel.com.ar/wp-content/uploads/2025/11/header-ref-1.png");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}.elementor-1777 .elementor-element.elementor-element-1ef7dda{--spacer-size:150px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1777 .elementor-element.elementor-element-0dead94{width:100%;max-width:100%;text-align:center;}.elementor-1777 .elementor-element.elementor-element-0dead94.elementor-element{--align-self:center;}.elementor-1777 .elementor-element.elementor-element-0dead94 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:55px;font-weight:700;color:#FFFFFF;}.elementor-1777 .elementor-element.elementor-element-f7cb3dc{--spacer-size:150px;}.elementor-1777 .elementor-element.elementor-element-061778b{--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-1777 .elementor-element.elementor-element-53dff5b{--spacer-size:50px;}.elementor-1777 .elementor-element.elementor-element-cf70996{--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-1777 .elementor-element.elementor-element-782b75a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1777 .elementor-element.elementor-element-b9a0774{--display:flex;}.elementor-1777 .elementor-element.elementor-element-1973a41{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1777 .elementor-element.elementor-element-bc9318f:hover img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1777 .elementor-element.elementor-element-bc9318f img{transition-duration:1s;border-radius:15px 15px 15px 15px;box-shadow:0px 0px 30px 0px rgba(0,0,0,0.5);}.elementor-1777 .elementor-element.elementor-element-02e9bb9{text-align:center;}.elementor-1777 .elementor-element.elementor-element-02e9bb9 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:400;color:#EBEBEB;}.elementor-1777 .elementor-element.elementor-element-cdb6159{text-align:center;}.elementor-1777 .elementor-element.elementor-element-cdb6159 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:500;}.elementor-1777 .elementor-element.elementor-element-a02847a{--display:flex;}.elementor-1777 .elementor-element.elementor-element-2e17075{--display:flex;}.elementor-1777 .elementor-element.elementor-element-863e53d img{border-radius:15px 15px 15px 15px;box-shadow:0px 0px 30px 0px rgba(0,0,0,0.5);}.elementor-1777 .elementor-element.elementor-element-09c91f0{text-align:center;}.elementor-1777 .elementor-element.elementor-element-09c91f0 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:400;color:#EBEBEB;}.elementor-1777 .elementor-element.elementor-element-02cc7f4{text-align:center;}.elementor-1777 .elementor-element.elementor-element-02cc7f4 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:500;}.elementor-1777 .elementor-element.elementor-element-6e031b8{--display:flex;}.elementor-1777 .elementor-element.elementor-element-b044699{--display:flex;}.elementor-1777 .elementor-element.elementor-element-7a64922 img{border-radius:15px 15px 15px 15px;box-shadow:0px 0px 30px 0px rgba(0,0,0,0.5);}.elementor-1777 .elementor-element.elementor-element-bf09a06{text-align:center;}.elementor-1777 .elementor-element.elementor-element-bf09a06 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-1777 .elementor-element.elementor-element-8dc19f3{text-align:center;}.elementor-1777 .elementor-element.elementor-element-8dc19f3 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:500;}.elementor-1777 .elementor-element.elementor-element-ccb68f6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1777 .elementor-element.elementor-element-5f67a60{--display:flex;}.elementor-1777 .elementor-element.elementor-element-ec1bfcf{--display:flex;}.elementor-1777 .elementor-element.elementor-element-fc84de9:hover img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1777 .elementor-element.elementor-element-fc84de9 img{transition-duration:1s;border-radius:15px 15px 15px 15px;box-shadow:0px 0px 30px 0px rgba(0,0,0,0.5);}.elementor-1777 .elementor-element.elementor-element-2f6a747{text-align:center;}.elementor-1777 .elementor-element.elementor-element-2f6a747 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:400;color:#EBEBEB;}.elementor-1777 .elementor-element.elementor-element-4e3ac93{text-align:center;}.elementor-1777 .elementor-element.elementor-element-4e3ac93 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:500;}.elementor-1777 .elementor-element.elementor-element-d86aff7{--display:flex;}.elementor-1777 .elementor-element.elementor-element-60eccfe{--display:flex;}.elementor-1777 .elementor-element.elementor-element-bff4440 img{border-radius:15px 15px 15px 15px;box-shadow:0px 0px 30px 0px rgba(0,0,0,0.5);}.elementor-1777 .elementor-element.elementor-element-858da6b{text-align:center;}.elementor-1777 .elementor-element.elementor-element-858da6b .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:400;color:#EBEBEB;}.elementor-1777 .elementor-element.elementor-element-57a188d{text-align:center;}.elementor-1777 .elementor-element.elementor-element-57a188d .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:500;}.elementor-1777 .elementor-element.elementor-element-876558a{--display:flex;}.elementor-1777 .elementor-element.elementor-element-4add373{--display:flex;}.elementor-1777 .elementor-element.elementor-element-74016b7 img{border-radius:15px 15px 15px 15px;box-shadow:0px 0px 30px 0px rgba(0,0,0,0.5);}.elementor-1777 .elementor-element.elementor-element-0d224e6{text-align:center;}.elementor-1777 .elementor-element.elementor-element-0d224e6 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-1777 .elementor-element.elementor-element-2d565ea{text-align:center;}.elementor-1777 .elementor-element.elementor-element-2d565ea .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:500;}.elementor-1777 .elementor-element.elementor-element-b79ce9b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1777 .elementor-element.elementor-element-fa3f701{--display:flex;}.elementor-1777 .elementor-element.elementor-element-2a30e2c{--display:flex;}.elementor-1777 .elementor-element.elementor-element-33e8d1c:hover img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1777 .elementor-element.elementor-element-33e8d1c img{transition-duration:1s;border-radius:15px 15px 15px 15px;box-shadow:0px 0px 30px 0px rgba(0,0,0,0.5);}.elementor-1777 .elementor-element.elementor-element-bb10694{text-align:center;}.elementor-1777 .elementor-element.elementor-element-bb10694 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:400;color:#EBEBEB;}.elementor-1777 .elementor-element.elementor-element-b2c9f87{text-align:center;}.elementor-1777 .elementor-element.elementor-element-b2c9f87 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:500;}.elementor-1777 .elementor-element.elementor-element-7cff198{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1777 .elementor-element.elementor-element-1f94401{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1777 .elementor-element.elementor-element-0a52840{--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-1777 .elementor-element.elementor-element-27ec650{--spacer-size:50px;}@media(max-width:1024px){.elementor-1777 .elementor-element.elementor-element-02e9bb9 .elementor-heading-title{font-size:10px;}.elementor-1777 .elementor-element.elementor-element-cdb6159 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-09c91f0 .elementor-heading-title{font-size:10px;}.elementor-1777 .elementor-element.elementor-element-02cc7f4 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-bf09a06 .elementor-heading-title{font-size:10px;}.elementor-1777 .elementor-element.elementor-element-8dc19f3 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-2f6a747 .elementor-heading-title{font-size:10px;}.elementor-1777 .elementor-element.elementor-element-4e3ac93 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-858da6b .elementor-heading-title{font-size:10px;}.elementor-1777 .elementor-element.elementor-element-57a188d .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-0d224e6 .elementor-heading-title{font-size:10px;}.elementor-1777 .elementor-element.elementor-element-2d565ea .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-bb10694 .elementor-heading-title{font-size:10px;}.elementor-1777 .elementor-element.elementor-element-b2c9f87 .elementor-heading-title{font-size:14px;}}@media(min-width:768px){.elementor-1777 .elementor-element.elementor-element-d2906c1{--content-width:85%;}.elementor-1777 .elementor-element.elementor-element-cf70996{--content-width:85%;}}@media(max-width:767px){.elementor-1777 .elementor-element.elementor-element-0dead94{text-align:center;}.elementor-1777 .elementor-element.elementor-element-0dead94 .elementor-heading-title{font-size:30px;}.elementor-1777 .elementor-element.elementor-element-02e9bb9 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-09c91f0 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-bf09a06 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-2f6a747 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-858da6b .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-0d224e6 .elementor-heading-title{font-size:14px;}.elementor-1777 .elementor-element.elementor-element-bb10694 .elementor-heading-title{font-size:14px;}}/* Start custom CSS for container, class: .elementor-element-b9a0774 *//* Estado normal para los headings externos */
.elementor-1777 .elementor-element.elementor-element-b9a0774 .elementor-heading-title {
  transition: color .4s ease;
}

/* Hover: cambia color solo en headings que NO están dentro de .overlay-heading */
.elementor-1777 .elementor-element.elementor-element-b9a0774:hover .elementor-heading-title {
  color: #E28130;
}

/* Pero ignorar (anular) los que están dentro del overlay */
.elementor-1777 .elementor-element.elementor-element-b9a0774:hover .overlay-heading .elementor-heading-title {
  color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a02847a *//* Estado normal para los headings externos */
.elementor-1777 .elementor-element.elementor-element-a02847a .elementor-heading-title {
  transition: color .4s ease;
}

/* Hover: cambia color solo en headings que NO están dentro de .overlay-heading */
.elementor-1777 .elementor-element.elementor-element-a02847a:hover .elementor-heading-title {
  color: #E28130;
}

/* Pero ignorar (anular) los que están dentro del overlay */
.elementor-1777 .elementor-element.elementor-element-a02847a:hover .overlay-heading .elementor-heading-title {
  color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6e031b8 *//* Estado normal para los headings externos */
.elementor-1777 .elementor-element.elementor-element-6e031b8 .elementor-heading-title {
  transition: color .4s ease;
}

/* Hover: cambia color solo en headings que NO están dentro de .overlay-heading */
.elementor-1777 .elementor-element.elementor-element-6e031b8:hover .elementor-heading-title {
  color: #E28130;
}

/* Pero ignorar (anular) los que están dentro del overlay */
.elementor-1777 .elementor-element.elementor-element-6e031b8:hover .overlay-heading .elementor-heading-title {
  color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-782b75a *//* ——— Bloque de media ——— */
.card-obra{
  position: relative;
  border-radius: 16px;
  overflow: hidden;                  /* para que el overlay no se salga */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Quitar márgenes automáticos de Elementor dentro del bloque */
.card-obra .elementor-widget{ margin:0 !important; }

/* Imagen */
.card-obra .elementor-widget-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  transition: filter .35s ease, transform .35s ease;
  aspect-ratio: 16/9;                /* opcional: mismas alturas */
  object-fit: cover;
}

/* Overlay azul */
.card-obra::after{
  content:"";
  position: absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);      /* transparente por defecto */
  transition: background .35s ease;
  pointer-events: none;
}

/* ——— Texto que VA sobre la foto ——— */
/* La clase TIENE que estar en el widget Heading (div.elementor-widget-heading) */
.card-obra .overlay-heading{
  position: absolute;                /* ahora sí se superpone */
  inset: 0;
  z-index: 2;
}

/* Centrado perfecto del texto y sin márgenes internos del widget */
.card-obra .overlay-heading .elementor-widget-container{
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.card-obra .overlay-heading .elementor-heading-title{
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;                        /* oculto inicialmente */
  transition: opacity .35s ease;
}

/* Hover: desatura, oscurece, muestra overlay y texto */
.card-obra:hover .elementor-widget-image img,
.card-obra:focus-within .elementor-widget-image img{
  filter: grayscale(100%) brightness(0.65) saturate(0.9);
  transform: scale(1.02);
}
.card-obra:hover::after,
.card-obra:focus-within::after{
  background: rgba(39,68,94,0.55);
}
.card-obra:hover .overlay-heading .elementor-heading-title,
.card-obra:focus-within .overlay-heading .elementor-heading-title{
  opacity: 1;
}

/* Accesibilidad si el bloque completo es link */
.card-obra a:focus-visible{
  outline:2px solid #E28130; outline-offset:3px;
}

/* Móvil: que el texto sobre la foto esté siempre visible (opcional) */
@media (max-width: 767px){
  .card-obra .overlay-heading .elementor-heading-title{ opacity:1; }
  .card-obra::after{ background: rgba(39,68,94,.40); }
}

/* El bloque que contiene SOLO la imagen + overlay */
.card-obra{
  position: relative;
  padding: 0 !important;       /* clave: sin padding aquí */
  border-radius: 16px;
  overflow: hidden;            /* recorta overlay a la foto */
  background: transparent;     /* sin fondo aquí */
}

/* La imagen */
.card-obra .elementor-widget-image{ margin:0 !important; }
.card-obra .elementor-widget-image img{
  display:block; width:100%; height:auto;
  border-radius: inherit;
  aspect-ratio:16/9;           /* opcional */
  object-fit:cover;
  transition: filter .35s, transform .35s;
}

/* Overlay azul ajustado EXACTO al borde de la foto */
.card-obra::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);
  transition: background .35s ease;
  pointer-events:none;
}

/* El heading que aparece sobre la foto: poner la clase en el WIDGET */
.card-obra .overlay-heading{
  position:absolute; inset:0;
  z-index:2;
  display:flex;                 /* centra vertical y horizontal */
  align-items:center;
  justify-content:center;
  padding:16px;
}
.card-obra .overlay-heading .elementor-widget-container{ margin:0 !important; }
.card-obra .overlay-heading .elementor-heading-title{
  margin:0 !important;         /* evita “pegado” arriba */
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; transition:opacity .35s;
}

/* Hover */
.card-obra:hover .elementor-widget-image img{ 
  filter:grayscale(100%) brightness(.65) saturate(.9);
  transform:scale(1.02);
}
.card-obra:hover::after{ background: rgba(39,68,94,.55); }
.card-obra:hover .overlay-heading .elementor-heading-title{ opacity:1; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f67a60 *//* Estado normal para los headings externos */
.elementor-1777 .elementor-element.elementor-element-5f67a60 .elementor-heading-title {
  transition: color .4s ease;
}

/* Hover: cambia color solo en headings que NO están dentro de .overlay-heading */
.elementor-1777 .elementor-element.elementor-element-5f67a60:hover .elementor-heading-title {
  color: #E28130;
}

/* Pero ignorar (anular) los que están dentro del overlay */
.elementor-1777 .elementor-element.elementor-element-5f67a60:hover .overlay-heading .elementor-heading-title {
  color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d86aff7 *//* Estado normal para los headings externos */
.elementor-1777 .elementor-element.elementor-element-d86aff7 .elementor-heading-title {
  transition: color .4s ease;
}

/* Hover: cambia color solo en headings que NO están dentro de .overlay-heading */
.elementor-1777 .elementor-element.elementor-element-d86aff7:hover .elementor-heading-title {
  color: #E28130;
}

/* Pero ignorar (anular) los que están dentro del overlay */
.elementor-1777 .elementor-element.elementor-element-d86aff7:hover .overlay-heading .elementor-heading-title {
  color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-876558a *//* Estado normal para los headings externos */
.elementor-1777 .elementor-element.elementor-element-876558a .elementor-heading-title {
  transition: color .4s ease;
}

/* Hover: cambia color solo en headings que NO están dentro de .overlay-heading */
.elementor-1777 .elementor-element.elementor-element-876558a:hover .elementor-heading-title {
  color: #E28130;
}

/* Pero ignorar (anular) los que están dentro del overlay */
.elementor-1777 .elementor-element.elementor-element-876558a:hover .overlay-heading .elementor-heading-title {
  color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccb68f6 *//* ——— Bloque de media ——— */
.card-obra{
  position: relative;
  border-radius: 16px;
  overflow: hidden;                  /* para que el overlay no se salga */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Quitar márgenes automáticos de Elementor dentro del bloque */
.card-obra .elementor-widget{ margin:0 !important; }

/* Imagen */
.card-obra .elementor-widget-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  transition: filter .35s ease, transform .35s ease;
  aspect-ratio: 16/9;                /* opcional: mismas alturas */
  object-fit: cover;
}

/* Overlay azul */
.card-obra::after{
  content:"";
  position: absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);      /* transparente por defecto */
  transition: background .35s ease;
  pointer-events: none;
}

/* ——— Texto que VA sobre la foto ——— */
/* La clase TIENE que estar en el widget Heading (div.elementor-widget-heading) */
.card-obra .overlay-heading{
  position: absolute;                /* ahora sí se superpone */
  inset: 0;
  z-index: 2;
}

/* Centrado perfecto del texto y sin márgenes internos del widget */
.card-obra .overlay-heading .elementor-widget-container{
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.card-obra .overlay-heading .elementor-heading-title{
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;                        /* oculto inicialmente */
  transition: opacity .35s ease;
}

/* Hover: desatura, oscurece, muestra overlay y texto */
.card-obra:hover .elementor-widget-image img,
.card-obra:focus-within .elementor-widget-image img{
  filter: grayscale(100%) brightness(0.65) saturate(0.9);
  transform: scale(1.02);
}
.card-obra:hover::after,
.card-obra:focus-within::after{
  background: rgba(39,68,94,0.55);
}
.card-obra:hover .overlay-heading .elementor-heading-title,
.card-obra:focus-within .overlay-heading .elementor-heading-title{
  opacity: 1;
}

/* Accesibilidad si el bloque completo es link */
.card-obra a:focus-visible{
  outline:2px solid #E28130; outline-offset:3px;
}

/* Móvil: que el texto sobre la foto esté siempre visible (opcional) */
@media (max-width: 767px){
  .card-obra .overlay-heading .elementor-heading-title{ opacity:1; }
  .card-obra::after{ background: rgba(39,68,94,.40); }
}

/* El bloque que contiene SOLO la imagen + overlay */
.card-obra{
  position: relative;
  padding: 0 !important;       /* clave: sin padding aquí */
  border-radius: 16px;
  overflow: hidden;            /* recorta overlay a la foto */
  background: transparent;     /* sin fondo aquí */
}

/* La imagen */
.card-obra .elementor-widget-image{ margin:0 !important; }
.card-obra .elementor-widget-image img{
  display:block; width:100%; height:auto;
  border-radius: inherit;
  aspect-ratio:16/9;           /* opcional */
  object-fit:cover;
  transition: filter .35s, transform .35s;
}

/* Overlay azul ajustado EXACTO al borde de la foto */
.card-obra::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);
  transition: background .35s ease;
  pointer-events:none;
}

/* El heading que aparece sobre la foto: poner la clase en el WIDGET */
.card-obra .overlay-heading{
  position:absolute; inset:0;
  z-index:2;
  display:flex;                 /* centra vertical y horizontal */
  align-items:center;
  justify-content:center;
  padding:16px;
}
.card-obra .overlay-heading .elementor-widget-container{ margin:0 !important; }
.card-obra .overlay-heading .elementor-heading-title{
  margin:0 !important;         /* evita “pegado” arriba */
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; transition:opacity .35s;
}

/* Hover */
.card-obra:hover .elementor-widget-image img{ 
  filter:grayscale(100%) brightness(.65) saturate(.9);
  transform:scale(1.02);
}
.card-obra:hover::after{ background: rgba(39,68,94,.55); }
.card-obra:hover .overlay-heading .elementor-heading-title{ opacity:1; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fa3f701 *//* Estado normal para los headings externos */
.elementor-1777 .elementor-element.elementor-element-fa3f701 .elementor-heading-title {
  transition: color .4s ease;
}

/* Hover: cambia color solo en headings que NO están dentro de .overlay-heading */
.elementor-1777 .elementor-element.elementor-element-fa3f701:hover .elementor-heading-title {
  color: #E28130;
}

/* Pero ignorar (anular) los que están dentro del overlay */
.elementor-1777 .elementor-element.elementor-element-fa3f701:hover .overlay-heading .elementor-heading-title {
  color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7cff198 *//* ——— Bloque de media ——— */
.card-obra{
  position: relative;
  border-radius: 16px;
  overflow: hidden;                  /* para que el overlay no se salga */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Quitar márgenes automáticos de Elementor dentro del bloque */
.card-obra .elementor-widget{ margin:0 !important; }

/* Imagen */
.card-obra .elementor-widget-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  transition: filter .35s ease, transform .35s ease;
  aspect-ratio: 16/9;                /* opcional: mismas alturas */
  object-fit: cover;
}

/* Overlay azul */
.card-obra::after{
  content:"";
  position: absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);      /* transparente por defecto */
  transition: background .35s ease;
  pointer-events: none;
}

/* ——— Texto que VA sobre la foto ——— */
/* La clase TIENE que estar en el widget Heading (div.elementor-widget-heading) */
.card-obra .overlay-heading{
  position: absolute;                /* ahora sí se superpone */
  inset: 0;
  z-index: 2;
}

/* Centrado perfecto del texto y sin márgenes internos del widget */
.card-obra .overlay-heading .elementor-widget-container{
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.card-obra .overlay-heading .elementor-heading-title{
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;                        /* oculto inicialmente */
  transition: opacity .35s ease;
}

/* Hover: desatura, oscurece, muestra overlay y texto */
.card-obra:hover .elementor-widget-image img,
.card-obra:focus-within .elementor-widget-image img{
  filter: grayscale(100%) brightness(0.65) saturate(0.9);
  transform: scale(1.02);
}
.card-obra:hover::after,
.card-obra:focus-within::after{
  background: rgba(39,68,94,0.55);
}
.card-obra:hover .overlay-heading .elementor-heading-title,
.card-obra:focus-within .overlay-heading .elementor-heading-title{
  opacity: 1;
}

/* Accesibilidad si el bloque completo es link */
.card-obra a:focus-visible{
  outline:2px solid #E28130; outline-offset:3px;
}

/* Móvil: que el texto sobre la foto esté siempre visible (opcional) */
@media (max-width: 767px){
  .card-obra .overlay-heading .elementor-heading-title{ opacity:1; }
  .card-obra::after{ background: rgba(39,68,94,.40); }
}

/* El bloque que contiene SOLO la imagen + overlay */
.card-obra{
  position: relative;
  padding: 0 !important;       /* clave: sin padding aquí */
  border-radius: 16px;
  overflow: hidden;            /* recorta overlay a la foto */
  background: transparent;     /* sin fondo aquí */
}

/* La imagen */
.card-obra .elementor-widget-image{ margin:0 !important; }
.card-obra .elementor-widget-image img{
  display:block; width:100%; height:auto;
  border-radius: inherit;
  aspect-ratio:16/9;           /* opcional */
  object-fit:cover;
  transition: filter .35s, transform .35s;
}

/* Overlay azul ajustado EXACTO al borde de la foto */
.card-obra::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);
  transition: background .35s ease;
  pointer-events:none;
}

/* El heading que aparece sobre la foto: poner la clase en el WIDGET */
.card-obra .overlay-heading{
  position:absolute; inset:0;
  z-index:2;
  display:flex;                 /* centra vertical y horizontal */
  align-items:center;
  justify-content:center;
  padding:16px;
}
.card-obra .overlay-heading .elementor-widget-container{ margin:0 !important; }
.card-obra .overlay-heading .elementor-heading-title{
  margin:0 !important;         /* evita “pegado” arriba */
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; transition:opacity .35s;
}

/* Hover */
.card-obra:hover .elementor-widget-image img{ 
  filter:grayscale(100%) brightness(.65) saturate(.9);
  transform:scale(1.02);
}
.card-obra:hover::after{ background: rgba(39,68,94,.55); }
.card-obra:hover .overlay-heading .elementor-heading-title{ opacity:1; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1f94401 *//* ——— Bloque de media ——— */
.card-obra{
  position: relative;
  border-radius: 16px;
  overflow: hidden;                  /* para que el overlay no se salga */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Quitar márgenes automáticos de Elementor dentro del bloque */
.card-obra .elementor-widget{ margin:0 !important; }

/* Imagen */
.card-obra .elementor-widget-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  transition: filter .35s ease, transform .35s ease;
  aspect-ratio: 16/9;                /* opcional: mismas alturas */
  object-fit: cover;
}

/* Overlay azul */
.card-obra::after{
  content:"";
  position: absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);      /* transparente por defecto */
  transition: background .35s ease;
  pointer-events: none;
}

/* ——— Texto que VA sobre la foto ——— */
/* La clase TIENE que estar en el widget Heading (div.elementor-widget-heading) */
.card-obra .overlay-heading{
  position: absolute;                /* ahora sí se superpone */
  inset: 0;
  z-index: 2;
}

/* Centrado perfecto del texto y sin márgenes internos del widget */
.card-obra .overlay-heading .elementor-widget-container{
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.card-obra .overlay-heading .elementor-heading-title{
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;                        /* oculto inicialmente */
  transition: opacity .35s ease;
}

/* Hover: desatura, oscurece, muestra overlay y texto */
.card-obra:hover .elementor-widget-image img,
.card-obra:focus-within .elementor-widget-image img{
  filter: grayscale(100%) brightness(0.65) saturate(0.9);
  transform: scale(1.02);
}
.card-obra:hover::after,
.card-obra:focus-within::after{
  background: rgba(39,68,94,0.55);
}
.card-obra:hover .overlay-heading .elementor-heading-title,
.card-obra:focus-within .overlay-heading .elementor-heading-title{
  opacity: 1;
}

/* Accesibilidad si el bloque completo es link */
.card-obra a:focus-visible{
  outline:2px solid #E28130; outline-offset:3px;
}

/* Móvil: que el texto sobre la foto esté siempre visible (opcional) */
@media (max-width: 767px){
  .card-obra .overlay-heading .elementor-heading-title{ opacity:1; }
  .card-obra::after{ background: rgba(39,68,94,.40); }
}

/* El bloque que contiene SOLO la imagen + overlay */
.card-obra{
  position: relative;
  padding: 0 !important;       /* clave: sin padding aquí */
  border-radius: 16px;
  overflow: hidden;            /* recorta overlay a la foto */
  background: transparent;     /* sin fondo aquí */
}

/* La imagen */
.card-obra .elementor-widget-image{ margin:0 !important; }
.card-obra .elementor-widget-image img{
  display:block; width:100%; height:auto;
  border-radius: inherit;
  aspect-ratio:16/9;           /* opcional */
  object-fit:cover;
  transition: filter .35s, transform .35s;
}

/* Overlay azul ajustado EXACTO al borde de la foto */
.card-obra::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);
  transition: background .35s ease;
  pointer-events:none;
}

/* El heading que aparece sobre la foto: poner la clase en el WIDGET */
.card-obra .overlay-heading{
  position:absolute; inset:0;
  z-index:2;
  display:flex;                 /* centra vertical y horizontal */
  align-items:center;
  justify-content:center;
  padding:16px;
}
.card-obra .overlay-heading .elementor-widget-container{ margin:0 !important; }
.card-obra .overlay-heading .elementor-heading-title{
  margin:0 !important;         /* evita “pegado” arriba */
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; transition:opacity .35s;
}

/* Hover */
.card-obra:hover .elementor-widget-image img{ 
  filter:grayscale(100%) brightness(.65) saturate(.9);
  transform:scale(1.02);
}
.card-obra:hover::after{ background: rgba(39,68,94,.55); }
.card-obra:hover .overlay-heading .elementor-heading-title{ opacity:1; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b79ce9b *//* ——— Bloque de media ——— */
.card-obra{
  position: relative;
  border-radius: 16px;
  overflow: hidden;                  /* para que el overlay no se salga */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Quitar márgenes automáticos de Elementor dentro del bloque */
.card-obra .elementor-widget{ margin:0 !important; }

/* Imagen */
.card-obra .elementor-widget-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  transition: filter .35s ease, transform .35s ease;
  aspect-ratio: 16/9;                /* opcional: mismas alturas */
  object-fit: cover;
}

/* Overlay azul */
.card-obra::after{
  content:"";
  position: absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);      /* transparente por defecto */
  transition: background .35s ease;
  pointer-events: none;
}

/* ——— Texto que VA sobre la foto ——— */
/* La clase TIENE que estar en el widget Heading (div.elementor-widget-heading) */
.card-obra .overlay-heading{
  position: absolute;                /* ahora sí se superpone */
  inset: 0;
  z-index: 2;
}

/* Centrado perfecto del texto y sin márgenes internos del widget */
.card-obra .overlay-heading .elementor-widget-container{
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.card-obra .overlay-heading .elementor-heading-title{
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;                        /* oculto inicialmente */
  transition: opacity .35s ease;
}

/* Hover: desatura, oscurece, muestra overlay y texto */
.card-obra:hover .elementor-widget-image img,
.card-obra:focus-within .elementor-widget-image img{
  filter: grayscale(100%) brightness(0.65) saturate(0.9);
  transform: scale(1.02);
}
.card-obra:hover::after,
.card-obra:focus-within::after{
  background: rgba(39,68,94,0.55);
}
.card-obra:hover .overlay-heading .elementor-heading-title,
.card-obra:focus-within .overlay-heading .elementor-heading-title{
  opacity: 1;
}

/* Accesibilidad si el bloque completo es link */
.card-obra a:focus-visible{
  outline:2px solid #E28130; outline-offset:3px;
}

/* Móvil: que el texto sobre la foto esté siempre visible (opcional) */
@media (max-width: 767px){
  .card-obra .overlay-heading .elementor-heading-title{ opacity:1; }
  .card-obra::after{ background: rgba(39,68,94,.40); }
}

/* El bloque que contiene SOLO la imagen + overlay */
.card-obra{
  position: relative;
  padding: 0 !important;       /* clave: sin padding aquí */
  border-radius: 16px;
  overflow: hidden;            /* recorta overlay a la foto */
  background: transparent;     /* sin fondo aquí */
}

/* La imagen */
.card-obra .elementor-widget-image{ margin:0 !important; }
.card-obra .elementor-widget-image img{
  display:block; width:100%; height:auto;
  border-radius: inherit;
  aspect-ratio:16/9;           /* opcional */
  object-fit:cover;
  transition: filter .35s, transform .35s;
}

/* Overlay azul ajustado EXACTO al borde de la foto */
.card-obra::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: rgba(39,68,94,0);
  transition: background .35s ease;
  pointer-events:none;
}

/* El heading que aparece sobre la foto: poner la clase en el WIDGET */
.card-obra .overlay-heading{
  position:absolute; inset:0;
  z-index:2;
  display:flex;                 /* centra vertical y horizontal */
  align-items:center;
  justify-content:center;
  padding:16px;
}
.card-obra .overlay-heading .elementor-widget-container{ margin:0 !important; }
.card-obra .overlay-heading .elementor-heading-title{
  margin:0 !important;         /* evita “pegado” arriba */
  color:#fff; font-weight:700; line-height:1.2; text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; transition:opacity .35s;
}

/* Hover */
.card-obra:hover .elementor-widget-image img{ 
  filter:grayscale(100%) brightness(.65) saturate(.9);
  transform:scale(1.02);
}
.card-obra:hover::after{ background: rgba(39,68,94,.55); }
.card-obra:hover .overlay-heading .elementor-heading-title{ opacity:1; }/* End custom CSS */