/*Colores global e Imagenes 
 *Para ver más detalles entrar aquí­: https://docs.google.com/document/d/1gnvgM1goiPhXeE7YRq3Rpx3ILEAdHXtbjd-tsAFd4sw/edit?tab=t.0
*/
:root {
  /*Colores*/
  --colorPrincipal: #0077C8;
  --colorSecundario: #072E6D;
  --colorSecundarioOscuro: #0000004a;
  --colorSecundarioClaro: #89a6c8;
  --colorTitulos: #3e3e3c;
  --colorTextos: #595959;
  --colorFondo: #ffffff;
  --colorFondoCv: #f1f1f1;
  --colorColumna: #dddcdc;
  --colorFondoFooter: #fcfcfd;
/* 
header{
  border-bottom: transparent;
} */

  /*Fondo LandingPage*/
  --fondoLanding: url("https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/bg-landing.webp");

  /*Fondo LandingPage Mobil*/
  --fondoLandingMobil: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/bg-landing-movil.webp);

  /*Logo Header*/
  --logoHeader: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/logo-amazon.webp);

  /*Banner principal Mobil*/
  --bannerPrincipalMobil: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/banner-mobil.webp);

  /*Fondo Card Pabellones*/
  --fondoCardPabellon1: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/pb-1.webp);
  --fondoCardPabellon2: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/pb-2.webp);
  --fondoCardPabellon3: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/pb-3.webp);
  --fondoCardPabellon4: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/pb-4.webp);
  /*Fondo Card Pabellones Mobil*/
  /* --fondoCardPabellonMobil1: url(https://repo-diseno.s3.amazonaws.com/comunidad/demoferia2025_trabajando_cl/bn-card-pb-1.jpg);
	--fondoCardPabellonMobil2: url(https://repo-diseno.s3.amazonaws.com/comunidad/demoferia2025_trabajando_cl/bn-card-pb-2.jpg);
	--fondoCardPabellonMobil3: url(https://repo-diseno.s3.amazonaws.com/comunidad/demoferia2025_trabajando_cl/bn-card-pb-3.jpg); */

  /*Fondo Pagina Interna Pabellones*/
  --fondoPagePabellon1: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/banner-pb-1.webp);
  --fondoPagePabellon2: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/banner-pb-2.webp);
  --fondoPagePabellon3: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/banner-pb-3.webp);
  --fondoPagePabellon4: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/banner-pb-4.webp);
}
/*** GLOBAL ***/
.btn.btn-sm.btn-outline-primary {
  padding: 8px 26px !important;
}
/*** LANDING PAGE ***/
.footer.customFooter.espacioTop {
  width: 100%;
}
/*Header*/
#nuxt-padre.claseID_landingInicio .headerBox,
#nuxt-padre.claseID_landingFin .headerBox {
  position: absolute;
  top: 0;
  width: 100%;
}
#nuxt-padre.claseID_landingInicio .headerBox .color-principal,
#nuxt-padre.claseID_landingFin .headerBox .color-principal {
  background-color: transparent !important;
}
.shadowTop.bg-empresas.overflow-visible .pt-5 {
  padding-bottom: 3rem !important;
}
/*Centrar contenido (reloj, titulo, texto)*/
#nuxt-padre.claseID_landingInicio
  .landingContent
  > div[data-v-e09c9021]:first-of-type,
#nuxt-padre.claseID_landingFin
  .landingContent
  > div[data-v-e09c9021]:first-of-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  width: 80%;
}
#nuxt-padre.claseID_landingInicio .infoFeria,
#nuxt-padre.claseID_landingFin .infoFeria {
  text-align: start !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}
#nuxt-padre.claseID_landingInicio h1.fw-bold.mb-4,
#nuxt-padre.claseID_landingFin h1.fw-bold.mb-4 {
  font-size: 2.6rem;
  text-shadow: 1px 2px 9px #00000075;
}
.infoFeria h2[data-v-e09c9021]{
  color: #FAB800 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  text-shadow: 1px 2px 9px #00000075;
}
.infoFeria h3[data-v-e09c9021] {
  font-weight: 400 !important;
  font-size: 1.5rem !important;
}





/* 1. Quitamos los márgenes de Bootstrap que separan los elementos */
.infoFeria h1, 
.infoFeria h2 {
    /*background-color: #072E6D !important;  El azul solicitado */
    color: white !important;              /* Texto en blanco para contraste */
    margin-bottom: 0 !important;          /* Quitamos el espacio entre H1 y H2 */
    margin-top: 0 !important;
    padding: 10px 20px;                   /* Espaciado interno */
    display: block;                       /* Asegura que ocupen el ancho */
}

/* 2. Opcional: Redondear solo las esquinas exteriores del bloque azul */
.infoFeria h1 {
    border-radius: 10px 10px 0 0; /* Solo arriba */
    padding: 10px 50px;
}

.infoFeria h2 {
    border-radius: 0 0 10px 10px; /* Solo abajo */
    padding: 0px 50px 10px 50px ;
    margin-bottom: 0px !important; /* Separación con el H3 */
}

/* 3. Aseguramos que el H3 no tenga fondo */
.infoFeria h3 {
    background-color: transparent !important;
    color: #333; /* O el color que prefieras para el H3 */
    margin-top: 0px;
    padding: 0px 50px;
}

/* 4. Si el contenedor padre tenía el fondo, se lo quitamos */
.infoFeria {
    background-color: transparent !important;
}

/*.fw-bold.mb-4::after {
    content: "MUNICIPALIDAD DE SANTIAGO";
    display: block;
}*/
/*Editar reloj*/
#nuxt-padre.claseID_landingInicio .circle[data-v-e09c9021] {
  background-color: #ffffff00;
  width: 100px;
}
#nuxt-padre.claseID_landingInicio .countdown.mb-4.mb-md-5 {
  gap: 0;
  background: #0000004a;
  padding: 0rem 1rem;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px !important;
}
#nuxt-padre.claseID_landingInicio .circle[data-v-e09c9021]:before {
  display: none !important;
}
#nuxt-padre.claseID_landingInicio .time[data-v-e09c9021] {
  font-size: 2.3rem !important;
}

/*Cambiar logo header*/
#nuxt-padre.claseID_landingInicio .headerBox img,
#nuxt-padre.claseID_landingFin .headerBox img {
  display: none !important;
}
#nuxt-padre.claseID_landingInicio .headerBox .my-1 a::before,
#nuxt-padre.claseID_landingFin .headerBox .my-1 a::before {
  content: "";
  /* background-image: var(--logoHeader) !important;
  width: 200px; oculto logo header de landing */ 
  height: 75px; /*45*/
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Boton landing*/
.btn-secundario.btn-ingresar-landing[data-v-e09c9021]{
    background-color: #072E6D !important;
    color: #fff !important;
    font-size: 1.4rem;
    padding: 25px 40px;
}


/*Cambiar Fondo landingpage*/
#nuxt-padre.claseID_landingInicio .landingContent,
#nuxt-padre.claseID_landingFin .landingContent {
  background-image: var(--fondoLanding) !important;
  background-size: cover !important;
  background-position: top !important;
  min-height: 100vh;
}



/*** FV ABIERTA INICIO ***/
/*HEADER*/
header.header-comunidad a.d-block.w-100.tag-manager-ir-home::before,
.claseID_registro div[data-v-126426a1] .my-1 a::before {
  content: "";
  background-image: var(--logoHeader);
  width: 270px;
  height: 50px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

header.header-comunidad a.d-block.w-100.tag-manager-ir-home img,
.claseID_registro div[data-v-126426a1] a img {
  display: none !important;
}


/*HEADER FIN*/

/* .fechasFeria h2.main-title::after {
  content: "Municipalidad de Santiago";
  display: block;
  font-size: 1em;
  margin-top: 0px;
  font-weight: 800;
  text-align: left;
} */

/*MODAL*/
#novedadesModal .card {
  padding: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
}
#novedadesModal img.img-fluid {
  object-fit: cover;
  height: 100%;
}
#novedadesModal {
  color: #4d4d4d;
  text-align: left;
}
#novedadesModal .btn-close-container {
  background-color: var(--colorSecundario);
  border-radius: 5rem;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#novedadesModal .btn-close {
  color: white !important;
  opacity: 1;
  filter: invert(1);
  max-width: 5px !important;
  max-height: 5px;
  background-size: contain !important;
}
#novedadesModal .modal-body {
  padding: 2rem;
}
#novedadesModal h3 {
  font-size: 1.5rem;
  font-weight: 900;
}
#novedadesModal .contenido-novedades {
  min-height: 215px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#novedadesModal .modal.show .modal-dialog {
  margin-top: 7vh;
}
#novedadesModal .btn-novedad {
  background-color: var(--colorSecundario);
  color: white;
  position: relative;
  padding-right: 2.7rem;
}
#novedadesModal .btn-novedad::after {
  content: "";
  position: absolute;
  background-image: url(https://repo-diseno.s3.amazonaws.com/Iconos+RRSS/icon-mano.svg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: left center;
  display: block;
  width: 24px;
  height: 22px;
  right: 11px;
}
/*MODAL FIN*/

/*BANNER PRINCIPAL*/

.bannerBuscadorHomeFeria {
  margin-top: 0;
}
.primary-home {
  padding: 0 !important;
}
.primary-home {
  position: relative;
}
.w-100 {
  width: 100% !important;
}
.position-relative {
  position: relative !important;
}
.d-flex {
  display: flex !important
;
}
.bannerBuscadorHomeFeria {
  margin-top: 0;
}
.primary-home {
  position: relative;
  padding: 0 !important;
  min-height: 600px;
}

/*Texto*/
.claseID_homepage .seccionHome h2.main-title {
  font-size: 3rem;
  margin-bottom: 0 !important;
}
.claseID_homepage .seccionHome h3.main-title {
  margin: 0 !important;
  color: #FBC500;
}

/*Titulo*/
#nuxt-padre.claseID_homepage h3.main-title {
	color: #fce80d00 !important;
	margin-top: 0;
	position: relative;
	display: flex;
	align-items: center;
	text-shadow: unset !important;
}
#nuxt-padre.claseID_homepage h3.main-title::before {
	content: 'Del 12 al 15 de mayo de 2026';
	color: #FBC500 !important;
	margin-top: 0;
	position: absolute;
	text-shadow: 1px 1px 11px #4f4e4e;
}


/* Usamos el atributo data-v para ganar prioridad y !important para asegurar el cambio */
.infoFeria h2[data-v-e09c9021] {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    margin: 0 !important;
}

/* Rediseñamos el texto nuevo desde cero */
.infoFeria h2[data-v-e09c9021]::after {
    content: "Del 12 al 15 de mayo de 2026"; /* TU NUEVA FECHA */
    font-size: 1.5rem !important; /* Ajusta el tamaño a tu gusto */
    color: #FBC500 !important;   /* Ajusta el color a tu gusto */
    visibility: visible !important;
    display: block !important;
    line-height: 20px;
}



/*Botones*/
#creaTuCuenta{
  background-color: #fff !important;
}


a[href^="/noticias"] {
    color: #ffffff !important;
}
a[href="/informacion-del-evento"] {
    color: #ffffff !important;
}
a[href="/page/preguntas-frecuentes"] {
    color: #ffffff !important;
}
.claseID_homepage .seccionHome .botonesFeria a {
  background-color: #00000099 !important;
}
.claseID_homepage .seccionHome .botonesFeria a:nth-child(2) {
  color: #0077c800 !important;
  position: relative;
  width: 300px;
}
.claseID_homepage .seccionHome .botonesFeria a:nth-child(2)::before {
  position: absolute;
  content: "Información del Evento";
  color: white;
  background-image: url("https://repo-diseno.s3.amazonaws.com/Iconos+RRSS/calendar-days.svg");
  background-repeat: no-repeat;
  background-size: 15px 20px;
  background-position: left center;
  padding-left: 28px;
}
.botonesFeria .btn i,
.botonesFeria .btn {
  text-shadow: none !important;
}

.position-absolute.d-flex.flex-column {
  background-color: #2c92d8 !important;
}
/*BANNER PRINCIPAL FIN*/
/*Quitar fecha eventos*/
#cont-agenda .border-fecha {
  display: none;
}
/*Editar Banner Publicitario*/
#nuxt-padre.claseID_homepage .visible.bannerItem {
  box-shadow: 1px 1px 8px #00000040;
  border-radius: 10px;
  overflow: hidden;
}

/*Fondo Card Pabellones*/
#nuxt-padre.claseID_homepage .fondoPabellon-1.pabellonItem {
  background-image: var(--fondoCardPabellon1);
}
#nuxt-padre.claseID_homepage .fondoPabellon-2.pabellonItem {
  background-image: var(--fondoCardPabellon2);
}
#nuxt-padre.claseID_homepage .fondoPabellon-3.pabellonItem {
  background-image: var(--fondoCardPabellon3);
}
#nuxt-padre.claseID_homepage .fondoPabellon-4.pabellonItem {
  background-image: var(--fondoCardPabellon4);
}
/*Editar ancho pabellones*/
@media (min-width: 768px) {
  #nuxt-padre.claseID_homepage .pabellones .container {
    margin-top: -5vw;
  }
#nuxt-padre.claseID_homepage .pabellones .col-md-6 {
    flex: 0 0 auto;
    width: 30% !important;
  }
}
/*Editar Card Pabellones*/
#nuxt-padre.claseID_homepage .pabellonItem {
  border-radius: 15px;
  min-height: 195px;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 160px 1rem 1rem 1rem;
  padding-bottom: 1rem;
  background-color: white;
  color: var(--colorSecundario);
  transition: all 0.5s ease-out;
  border: 1px solid #b9b9b9;
}
#nuxt-padre.claseID_homepage .pabellonItem:hover {
  box-shadow: 0px 0px 10px #00000038;
}
#nuxt-padre.claseID_homepage .btnPabellon a {
  border-color: white !important;
  color: white !important;
  background-color: var(--colorPrincipal) !important;
  transition: all 0.3s, transform 0.3s;
}
#nuxt-padre.claseID_homepage .btnPabellon a:hover {
  background-color: var(--colorSecundarioOscuro) !important;
  color: white !important;
}
/*Centrar pabellones*/
#nuxt-padre.claseID_homepage .pabellones .row.g-3.mt-3.mb-5 {
  justify-content: center !important;
}
/*Botones pabellones*/
#nuxt-padre.claseID_homepage .pabellonItem .boxFooter.mt-5.w-100 {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
/*Titulo pabellones*/
#nuxt-padre.claseID_homepage .pabellonItem h3[data-v-d040cdf6] {
  font-size: 1.27rem !important;
  margin: 0 !important;
}
#nuxt-padre.claseID_homepage .boxFooter.mt-5.w-100 {
  margin-top: 10px !important;
}
/* #nuxt-padre.claseID_homepage .boxTitle.w-100 {
  display: none !important;
} */

/* Animación de aparición de abajo hacia arriba para las cajas de pabellón */
@keyframes aparecerArriba {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#nuxt-padre.claseID_homepage .pabellonItem {
  opacity: 0;
  animation: aparecerArriba 3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  padding-bottom: 15px;
}

/* Opcional: retraso para cada caja si quieres efecto tipo cascada */
#nuxt-padre.claseID_homepage .fondoPabellon-1.pabellonItem {
  animation-delay: 1s;
}
#nuxt-padre.claseID_homepage .fondoPabellon-2.pabellonItem {
  animation-delay: 1.5s;
}
#nuxt-padre.claseID_homepage .fondoPabellon-3.pabellonItem {
  animation-delay: 2s;
}
#nuxt-padre.claseID_homepage .fondoPabellon-4.pabellonItem {
  animation-delay: 2.5s;
}
/*Borrar cajas vacias de eventos*/
/* .cardNoticia.card.h-100.d-none.d-md-flex {
	display: none !important;
} */
/*Fondo Pagina Interna Pabellones*/
#nuxt-padre .fondoPabellon-1 {
  background-image: var(--fondoPagePabellon1);
}
#nuxt-padre .fondoPabellon-2 {
  background-image: var(--fondoPagePabellon2);
}
#nuxt-padre .fondoPabellon-3 {
  background-image: var(--fondoPagePabellon3);
}
#nuxt-padre .fondoPabellon-4 {
  background-image: var(--fondoPagePabellon4);
}
/*Editar fondo pagina interna pabellon*/
#nuxt-padre .subHeaderPabellon {
  background-position: top right;
  height: 100%;
  background-size: cover;
  z-index: 1;
}

/* Seleccionamos el contenedor principal */
.infoFeria::before {
    content: ""; 
    display: block;
    background-image: url(https://repo-diseno.s3.amazonaws.com/comunidad/avanzaempleo_cl/img/logoPpal.webp); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    width: 380px; 
    height: 128px;
    margin: 0px 46px; 
}

.infoFeria {
    position: relative;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
}
/*Mediaqueria Mobil min 768px*/
@media (min-width: 768px) {
  .fondoBuscadorV2 .row.justify-content-md-center {
    justify-content: start !important;
    text-align: start;
  }
  .fondoBuscadorV2 .col-12.col-md-8.buscadorHome {
    display: flex;
    flex-direction: column;
    align-items: start !important;
    padding: 0 4rem;
  }
  .fechasFeria h3.main-title {
    display: flex;
  }
}
/*Mediaqueria Mobil max 768px*/
@media (max-width: 768px) {
  header.header-comunidad a.d-block.w-100.tag-manager-ir-home::before, .claseID_registro div[data-v-126426a1] .my-1 a::before {
  width: 318px  !important;
}
  .infoFeria h1{
    padding: 20px 10px;
  }
  .infoFeria h2 {
    padding: 0px 50px 20px 10px;
}
  .infoFeria::before {
    margin: 0px 0px; 
}
  #nuxt-padre.claseID_landingInicio .landingContent {
    background-position: -70rem !important;
  }
  #nuxt-padre.claseID_landingInicio .landingContent::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #00379999;
    z-index: -1;
  }
  /*Fondo banner principal Mobil*/
  #nuxt-padre.claseID_homepage #bannerHome.bannerImgV2 {
    background-image: var(--bannerPrincipalMobil) !important;
    /* background-position: -10rem; */
  }
  /* .fondoPabellon-1.subHeaderPabellon::before {
    content: "";
    width: 100%;
    height: 220px;
    position: absolute;
    background: #005eada6;
    z-index: -1;
  } */

  #nuxt-padre.claseID_landingInicio .headerBox .my-1 a::before,
  #nuxt-padre.claseID_landingFin .headerBox .my-1 a::before {
    height: 44px;
  }
  #nuxt-padre.claseID_landingInicio h1.fw-bold.mb-4,
  #nuxt-padre.claseID_landingFin h1.fw-bold.mb-4 {
    font-size: 1.8rem;
    margin-top: 40px;
  }
  .img-fluid,
  .img-thumbnail {
    max-width: 225px !important;
    margin-bottom: 10px;
  }
  .claseID_homepage .seccionHome h2.main-title {
    font-size: 1.6rem;
  }
  .infoFeria h3[data-v-e09c9021] {
    font-size: 1.2rem !important; 
  }
  .claseID_homepage .seccionHome h3.main-title{
    font-size: 1.1rem;
  }
  .fechasFeria h2.main-title::after {
    text-align: center;
  }
  .fechasFeria h3.main-title::after {
    text-align: center;
  }
  a[href^="/noticias"] {
    color: #072e6d !important;
  }
  a[href="/informacion-del-evento"] {
      color: #072e6d !important;
  }
  a[href="/page/preguntas-frecuentes"] {
      color: #072e6d !important;
  }
  .infoFeria h2[data-v-e09c9021]::after {
    font-size: 1.3rem !important;
}
}
.header-comunidad nav .headerMenu li.customMenu > div{
  background-color:#75b6e3 !important;
}