/* Contenedor de la imagen */
.ImagenS {
  background-image: url('/images/demo/bg/services.webp');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}
.ImagenAb {
  background-image: url('/images/demo/bg/about.webp');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}
.ImagenR {
  background-image: url('/images/demo/bg/cotiza_ruta.webp');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}
.ImagenC {
  background-image: url('/images/shuttle-hero.jpg');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}
.ImagenEv {
  background-image: url('/images/demo/bg/events.webp');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}
.ImagenE {
  background-image: url('/images/demo/bg/empresa.webp');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}
.ImagenM {
  background-image: url('/images/demo/bg/faena-minera.webp');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}
.ImagenA {
  background-image: url('/images/demo/bg/airport.webp');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}
.Imagen {
  background-image: url('/images/demo/bg/valle-petorca.webp');
  width: 100%;
  height: 100vh;               /* pantalla grande */
  background-size: cover;
  background-position: center;
  border-radius: 0 0 50px 0;

  /* Flexbox para centrar */
  display: flex;
  align-items: center;        /* eje vertical */
  justify-content: center;    /* eje horizontal (ya tienes text‑center) */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .Imagen,
  .ImagenA,
  .ImagenM,
  .ImagenE,
  .ImagenEv,
  .ImagenC,
  .ImagenR,
  .ImagenAb,
  .ImagenS {
    height: 40vh;            /* o la altura que prefieras */
  }
}

/* Opcional: mantener proporción en pantallas grandes */
@media (min-width: 769px) {
  .Imagen,
  .ImagenA,
  .ImagenM,
  .ImagenE,
  .ImagenEv,
  .ImagenC,
  .ImagenR,
  .ImagenAb,
  .ImagenS {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

.t4-masthead .ja-masthead .ja-masthead-detail {
  padding: 2rem 0;
  text-align: center;
}
.ja-masthead {
    width: 50%;
    height: 800px;
}
h2,
a.category-link {
    font-family: "Josefin Sans", sans-serif !important;
}
.t4-offcanvas .t4-off-canvas-header .close span {
    color: #ffffff !important;
}
.t4-hero {
  overflow: hidden;
}
.t4-hero .bg-overlay-image {
	animation: zoominoutsinglefeatured 25s forwards;
}
@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}
#t4-header {
    margin-top: -3px !important;
}
/* Denuncia MedioAmbiental */
/* tarjeta base */
.extra-padding {
    padding: 4rem !important; /* valor mayor que p-5 (p-5 = 3rem en Bootstrap 4) */
}
.card-inner {
  position: relative;                /* clave: posicionamiento relativo */
  box-sizing: border-box;
  z-index: 3;
  border-radius: 4px;
  -webkit-box-shadow: 8px 8px 28px rgba(66,68,90,0.12);
  box-shadow: 8px 8px 28px rgba(66,68,90,0.22);
  background: #fff;
}
/* En escritorio: mover 150px hacia la izquierda pero mantener el ancho visual de la columna.
   Usamos left:-150px y padding-right:150px para que el contenido interno no se corte y el
   elemento siga ocupando el espacio horizontal de la columna. */
@media (min-width: 992px) {
  .card-inner {
    left: -200px;
    width: calc(100% + 200px);   /* asegura que la caja visual cubra la columna completa */
    padding-right: 200px;        /* compensa el desplazamiento internamente */
  }
}
/* En pantallas pequeñas volvemos a 100% normal */
@media (max-width: 991.98px) {
  .card-inner {
    left: 0;
    width: 100%;
    padding-right: 0;
  }
}
@media (min-width: 992px) {
    .extra-padding { padding: 4rem !important; }
}
@media (max-width: 991.98px) {
    .extra-padding { padding: 2rem !important; margin: 0 !important; }
}
.linegreen {
  background-image: url("/images/bg-doodle_green.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
    .linegreen {
        background-image: url("/images/bg-doodle_green.svg");
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: contain;
        white-space: nowrap;
        width: 85%;
    }
}
.lineGreen {
  background-image: url("/images/linegreen.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  white-space: nowrap;
  padding-bottom: 15px !important;
}
.lineGreen_ {
  background-image: url("/images/linegreen.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  white-space: nowrap;
  padding-bottom: 5px !important;
}
.lineRed {
  background-image: url("/images/twoLine.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  white-space: nowrap;
  padding-bottom: 5px !important;
}
#back-to-top {
  background: #c62941;
  border-radius: 5px;
  position: fixed;
  right: 2rem;
  bottom: 1rem;
  height: 36px;
  text-align: center;
  width: 36px;
  z-index: 1030;
}
.breadcrumb {
    background-color: #dee2e600;
    margin-left: 15px;
}
/* CTA */
/* Clase que añade el overlay con el gradiente deseado */
.gradient-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: linear-gradient(
    135deg,                     /* dirección del gradiente */
    #c2185b,                    /* rojo */
    #00897b                     /* verde‑azulado */
  );
  opacity: 0.6;                /* ajuste de intensidad */
  z-index: 1;                  /* queda bajo el contenido */
}

/* Necesario para que el pseudo‑elemento se posicione correctamente */
.gradient-custom {
  position: relative;          /* crea el contexto de posicionamiento */
  border-radius: 15px;
}

/* Eleva el contenido por encima del overlay */
.gradient-custom > * {
  position: relative;
  z-index: 2;
}
.bg-img-hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
/* Contact Info */
div.title-info > h2 {
    font-size: 20px;
}
div.contact-title > h2 {
    font-size: 20px;
}
legend {
    font-size: 14px !important;
    padding-bottom: 10px;
    padding-top: 10px;
}
label#jform_com_fields_elija_servicio-lbl {
    margin-left: 15px;
}

img.hero-img {
    background: white;
    width: 55px;
    height: 55px;
    /*border-radius: 50%;
    padding: 20px;
    border: 2px solid #80cbc4;
    transition: box-shadow .9s;*/
}
/*img.hero-img:hover {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: 20px;
    border: 2px solid #e3f2fd;
    box-shadow: inset 300px 0 0 0 #80cbc4;
    color: #F2F2F2 !important;
}*/
/*.acm-hero .btn.html5lightbox {
  border: 2px solid #c62941;
  color: #c62941;
}*/
/* Imágenes Servicios */
.projects .item-info {
    border-radius: 15px;
}
.convertforms .cf-btn::after {
  font-family: "Font Awesome 5 Free"; /* Asegúrate de que Font Awesome esté cargado */
  content: "\f30b"; /* Código del ícono (ejemplo: usuario) */
  font-weight: 900; /* Peso del ícono */
  position: absolute;
  margin-left: 5px;
  padding-right: 3px;
  top: 50%;
  transform: translateY(-50%); /* Centra verticalmente el ícono */
  color: var(--icon-color, inherit); /* Color del ícono, puedes personalizarlo */
}
.acm-hero .btn.html5lightbox{
    background: #22cc99;
    height: 150px;
    width:150px;
    border-radius:50%;
    border: solid 3px #22cc99;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}
.acm-hero .btn.html5lightbox::before{
    content:"";
    position: absolute;
    width:calc(100% + 40px);
    height:calc(100% + 40px);
    border:2px solid #22cc99; /* Estaba en white */
    border-radius:50%;
    animation:animate 1.5s linear infinite;
}
.acm-hero .btn.html5lightbox::after{
    content:"";
    position: absolute;
    width:calc(100% + 40px);
    height:calc(100% + 40px);
    border:2px solid #22cc99; /* Estaba en white */
    border-radius:50%;
    animation:animate 1.5s linear infinite;
    animation-delay:0.4s;
}
@keyframes animate{
    0%{
        transform:scale(0.5);
        opacity:0;
    }
    50%{
        transform:scale(1);
        opacity:1;
    }
    100%{
        transform:scale(1.4);
        opacity:0;
    }
}
.acm-hero .btn.html5lightbox:hover {
  /*background-color: #009688;*/
  border: 3px solid #fff;
  color: #fff;
}

/*.megaMenu {
    background-image: url("/images/demo/bg/bubbles_footer.png") !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}*/
.mega-nav .nav-link:hover::after {
  /* Unicode del icono que quieras usar.
     Ejemplo: \f0c1 = fa‑link, \f105 = fa‑angle‑right, \f0da = fa‑caret‑right */
  content: "\f178";

  font-family: "Font Awesome 6 Free";   /* nombre exacto de la familia */
  font-weight: 900;                     /* 900 = solid, 400 = regular */
  margin-left: 0.4em;                   /* espacio entre texto e icono */
  color: inherit;                       /* hereda el color del enlace */
  vertical-align: middle;
}
.texto-con-borde-sombra {
    color: white; /* Color del relleno del texto */
    text-shadow:
    -1px -1px 0 black,  /* Borde superior izquierdo */
    1px -1px 0 black,  /* Borde superior derecho */
    -1px  1px 0 black,  /* Borde inferior izquierdo */
    1px  1px 0 black;  /* Borde inferior derecho */
}
.btn {
    transition: all 0.2s linear 0s;
}
.btn:hover {
    border-radius: 50px;
}
/* Botones svg */
.btn-95,
.btn-95 *,
.btn-95 :after,
.btn-95 :before,
.btn-95:after,
.btn-95:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-95 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  text-transform: uppercase;
}
.btn-95:disabled {
  cursor: default;
}
.btn-95:-moz-focusring {
  outline: auto;
}
.btn-95 svg {
  vertical-align: middle;
}
.btn-95 [hidden] {
  display: none;
}
.btn-95 {
  background: hsla(0, 0%, 100%, 0.2);
  background-clip: content-box;
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: 100px;
  -webkit-mask-image: none;
  padding: 0;
  position: relative;
  transition: 0.2s;
  width: 100px;
}
.btn-95:hover {
  background: #fff;
}
.btn-95 svg {
  --size: 70px;
  fill: #fff;
  display: block;
  height: var(--size);
  left: calc(50% - var(--size) / 2);
  position: absolute;
  top: calc(50% - var(--size) / 2);
  width: var(--size);
}
.btn-95:hover svg {
  fill: #000;
}
.btn-95:before {
  border: 5px solid #fff;
  border-radius: 50%;
  content: "";
  inset: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(2);
  transition: 0.2s;
}
.btn-95:hover:before {
  opacity: 1;
  transform: scale(1);
}

.btn-89,
.btn-89 *,
.btn-89 :after,
.btn-89 :before,
.btn-89:after,
.btn-89:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-89 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-89:disabled {
  cursor: default;
}
.btn-89:-moz-focusring {
  outline: auto;
}
.btn-89 svg {
  vertical-align: middle;
}
.btn-89 [hidden] {
  display: none;
}
.btn-89 {
  background: none;
  border: 2px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: 90px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
  width: 90px;
}
.btn-89:hover {
  -webkit-animation: pulse 0.6s;
  animation: pulse 0.6s;
  box-shadow: 0 0 0 2em transparent;
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #fff;
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #fff;
  }
}
.btn-89 svg {
  --size: 50px;
  fill: #000;
  display: block;
  height: var(--size);
  left: calc(50% - var(--size) / 2);
  position: absolute;
  top: calc(50% - var(--size) / 2);
  width: var(--size);
}
.btn-89:before {
  background: #fff;
  border-radius: 50%;
  content: "";
  inset: 2px;
  position: absolute;
}
.btn-89:hover svg,
.btn-89:hover:before {
  -webkit-animation: move 0.5s;
  animation: move 0.5s;
}
@-webkit-keyframes move {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100%);
  }
  51% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes move {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100%);
  }
  51% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
/* sin padding-left footer  */
.no-pl {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Animación botón */
.owd-fade-in {
  animation: owd-fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry;
}
@keyframes owd-fade-in {
  from {
    transform: translateY(400px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes owd-fade-in {
  0% {
    transform: translateY(400px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.about-one-image {
  position: relative;
}
.about-one-image .floated-image-one {
  position: absolute;
  left: 0;
  bottom: -54px;
  z-index: -1;
  transition: all 500ms ease;
  animation: fadeInLeft 4s ease-in-out;
  transform: rotateX(45deg);
}
.category-module.mod-projects .category-link {
    text-decoration: none;
    position: relative;
    display: inline-block;
    border-bottom: none;
}
.category-module.mod-projects .category-link:hover {
    text-decoration: none;
    border-bottom: none;
}
.category-module.mod-projects .category-link:after{
  content:'';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #c2185b;
  transform: scaleX(0);
  transform-origin: center;
  transition: 1s;
}
.category-module.mod-projects .category-link:hover:after{
  transform: scaleX(1);
  transform-origin: center;
}
.acm-hero.style-2 .hero-heading a {
    text-decoration: none;
    position: relative;
    display: inline-block;
}
.acm-hero.style-2 .hero-heading a:after{
  content:'';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #c2185b;
  transform: scaleX(0);
  transform-origin: center;
  transition: 1s;
}
.acm-hero.style-2 .hero-heading a:hover:after{
  transform: scaleX(1);
  transform-origin: center;
}
.item-info::after {
    content: url('/images/demo/bg/bg-header-mini.png'); /* La imagen a añadir después */
    position: absolute;
    top: 0; /* O la posición que necesites */
    left: 0; /* O la posición que necesites */
    /*width: 100px;
    height: 100px;*/
}

#t4-masthead::after {
    content: url('/images/demo/bg/right_bg-header.png'); /* La imagen a añadir después */
    position: absolute;
    top: 0; /* O la posición que necesites */
    right: 0; /* O la posición que necesites */
    /*width: 100px;
    height: 100px;*/
}
@media (max-width: 768px) { /* Ajusta el valor según tus necesidades */
  #t4-masthead::after {
    display: none;
  }
}
.boxShadow {
    box-shadow: 12px 12px 0 rgba(0, 0, 0,.9);
    
    /* transición suave del shadow */
    transition: box-shadow 0.5s ease;
}
.boxShadow:hover {
    box-shadow: none;               /* desaparece con la transición */
}
.boxShadow blockquote {
    pointer-events: none;   /* permite que el hover llegue al .boxShadow */
}
.category-desc {
  border: none;
}
@media screen and (max-width: 600px) {
  .category-desc {
    display: none;
  }
}