/* These styles are generated from project.scss. */
.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* estos no */
body {
  background-color: #f2f2f2;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 350;
  font-variation-settings: "wdth" 100;
}

h1, h2, h3, h4, h5 {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  color: #592313;
}

/* https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle */
svg text {
  text-anchor: middle;
  dominant-baseline: middle;
}

/* tamaño de los bootstrap-icons para que no moleste la validacion de CSP por el uso de estilos inline */
.icono-bs {
  font-size: 1.5rem;
}

.icono-bs-big {
  font-size: 2rem;
}

/*specs base, y para celulares */

/* datosEmpresa no tiene padding-top adicional para celulares */
#logoEmpresa {
  padding-top: 12rem;
}

.el-categoria {
  h4 {
  text-shadow: 1px 1px black;
  }
}

/* imagenes de fondo para las categorias con degradé en negro al 66% */
#card-H {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66))  no-repeat;
  background-size: cover;
}

#card-R {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66)) no-repeat;
  background-size: cover;
}

#card-TU {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66)) no-repeat;
  background-size: cover;
}

#card-AB {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66)) no-repeat;
  background-size: cover;
}

#card-S {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66)) no-repeat;
  background-size: cover;
}

#card-AR {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66)) no-repeat;
  background-size: cover;
}

#card-TR {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66)) no-repeat;
  background-size: cover;
}

#card-B {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66)) no-repeat;
  background-size: cover;
}

#card-ZZZ {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.66)) no-repeat;
  background-size: cover;
}

/* encabezado de los formularios */
.base-form {
  padding-top: 16rem;
  padding-bottom: 10rem;

  h1, h2, h3, h4 {
    color: white;
  }
}

/* encabezado del listado de emprendimientos */
.el-header-directorio {
  background-color: #d39001;
  color: white;
  padding-bottom: 7.5rem;

  h1, h2, h3, h4, h5 {
    color: white;
  }
}

.el-header-directorio::after {
  background: url("../images/background-mobile-footer.baf03ac28d35.png") no-repeat 0 0;
  background-size: cover;
  content: "";
  position: absolute;
  height: 6rem;
  width: 100%;
  left: 0;
  top: 22.9rem;
}

#tituloDirectorio {
  padding-top: 10rem; /*ancho para celulares */
}

#subtituloDirectorio {
  padding-top: 1.2rem; /*ancho para celulares */
}

/* encabezado de casi todas las paginas */
.el-header {
  background: url("../images/bg-header-mini-light.37ebca45f301.png") no-repeat 0 0; /* ubicacion no-repeat background-position-x background-position-y */
  background-size: 100% 97%;
  position: relative;
  width: 100%;

  h1, h2, h3, h4 {
    color: #592313;
  }
}

/* encabezado de la pagina de cada emprendimiento */
.el-header-home, .el-header-empresa {
  background: url("../images/bg-directorio-mini.7627606ac06b.avif") no-repeat 0 0;
  background-size: cover;
}

.el-header-empresa {
  padding-top: 7.5rem;
}

.el-header-home {
  padding-top: 14rem;
}

#el-postheader-home, #el-postheader-empresa {
  background: url("../images/curva-directorio-end-mini.58c0f7dd922b.png") no-repeat 0 0;
  background-size: cover;
  height: 5.2rem;
  width: 100%;
}

/* encabezado de todos los formularios */
.el-header-form {
  background: url("../images/bg-form-mini.cf85171a3a66.png") no-repeat 0 -3.6rem;
  background-size: 100% 100%;
  position: relative;
  width: 100%;
  color: white;
}

/* pie de todas las paginas */
.el-footer {
  background-color: #fff;
  margin-top: 4.8rem;
  padding-top: 3.4rem;
  position: relative;
}

.el-footer::after {
  background: url("../images/background-mobile-footer.baf03ac28d35.png") no-repeat 0 0;
  content: "";
  transform: rotate(180deg);
  background-size: 100% 81%;
  background-position-y: 20px;
  height: 11.4rem;
  left: 0;
  top: -5.5rem;
  width: 100%;
  position: absolute;
}

.el-barra {
  background: url("../images/header.41c5218541f7.png") no-repeat 0 0;
  background-size: cover;
  position: fixed;
  padding: 0 1.8rem;
  height: 13.5rem;
  width: 100%;
  left: 0;
  top: 0px;
  z-index: 9999;
}

.el-direccion-empresa::before, .el-quees-ur::before {
  background: url("../images/bg-categorias-mini.4c4ee63e6ffe.png") no-repeat 0 0;
  background-size: contain;
  content: "";
  position: absolute;
  height: 14.2rem;
  width: 10.8rem;
  left: 0;
}

.el-quees-empresa::before, .el-quees-ipace::before {
  background: url("../images/bg-quees-mini.b4507f000462.png") no-repeat 0 0;
  background-size: contain;
  display: block;
  content: "";
  position: absolute;
  height: 303px;
  width: 164px;
  left: inherit;
  right: 0px;
}

#spanLinea::before {
  background: url("../images/lineDesktop.cf4c8c40f075.svg") no-repeat 0 0;
  content: "";
    height: 3rem;
    position: absolute;
    left: 3.2rem;
    width: 224px;
}

#spanLineaLight::before {
  background: url("../images/lineDesktop-light.8a7b9e5fce8e.svg") no-repeat 0 0;
  content: "";
    height: 3rem;
    position: absolute;
    left: 3.2rem;
    width: 224px;
}

/* celulares muy pequeños */
@media (min-width: 360px) {
  .el-barra {
    height: 11.5rem;
  }

  .el-header-directorio {
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 420px) {
  .el-header-directorio {
    padding-bottom: 7.5rem;
  }
}


@media (min-width: 576px) {
  #tituloDirectorio {
    padding-top: 15rem;
  }

  .el-barra {
    background-size: cover;
    height: 15rem;
  }

  .el-header-directorio {
    padding-bottom: 2.9rem;
  }
  
  .el-header-directorio::after {
    height: 6rem;
    top: 22.9rem;
  }
}

/* celulares tamaño estandar */
@media (min-width: 768px) {
  .el-header-directorio {
    padding-bottom: 4.6rem;
  }
  
  .el-barra {
    background-size: contain;
    height: 22.5rem;
  }

  #tituloDirectorio {
    padding-top: 8em;
  }

  .el-header-directorio::after {
    height: 8.3rem;
  }
}

@media (min-width: 868px) {
  .el-header-directorio::after {
    top: 23.9rem;
  }
}

/* celulares grandes en formato portrait */
@media (min-width: 992px) {
  .el-barra {
    background: url("../images/header-desktop.a562e349ca8e.png") no-repeat 0 0;
    background-size: 100%;
    position: fixed;
    padding-left: 2.4rem;
    padding-right: 0.2rem;
    height: 10.9rem;
    width: 100%;
    left: 0;
    top: 0px;
    z-index: 9999;
  }
  
  .el-header {
    background: url("../images/bg-header-light.27facdb0b0d8.png") no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
  }

  .el-header-form {
    background: url("../images/bg-form.73051db1f57b.png") no-repeat;
    background-size: 100% 100%;
    height: 34rem;
  }

  .el-header-directorio {
    padding-bottom: 2.8rem;
  }

  .el-header-directorio::after {
    background: url("../images/background-desktop-footer.52f7b479f878.avif") no-repeat 0 0;
    background-size: cover;
    content: "";
    position: absolute;
    height: 6.2rem;
    width: 100%;
    left: 0;
    top: 22.5rem;
  }

  .el-header-home, .el-header-empresa{
    background: url("../images/bg-directorio.b32775f212d7.avif") no-repeat 0 0;
    background-size: cover;
  }

  .el-header-empresa {
    padding-top: 14.7rem;
  }

  .el-header-home {
    padding-top: 3.8rem;
  }

  #el-postheader-empresa, #el-postheader-home {
    background: url("../images/curva-directorio-end.c3b19855bc64.avif") no-repeat 0 0;
    background-size: cover;
    height: 7.5rem;
    width: 100%;
  }

  #logoEmpresa, #datosEmpresa {
    padding-top: 0rem; /*para que no le meta mas padding del que ya tiene*/
  }

  #tituloDirectorio {
    padding-top: 12rem;
  }

  #subtituloDirectorio {
    padding-top: 15rem;
  }

  .el-quees-empresa::before {
    background: url("../images/bg-quees-empresa.976340fbce43.png") no-repeat 0 0;
    background-size: cover;
    display: block;
    content: "";
    position: absolute;
    height: 34.2rem;
    width: 210px;
    right: 0;
  }

  .el-direccion-empresa::before {
    background: url("../images/bg-categorias-empresa.e4a9716a2b19.png") no-repeat 0 0;
    background-size: contain;
    content: "";
    position: absolute;
    height: 22.5rem;
    width: 64.8rem;
    left: 0;
  }

  .el-footer {
    margin-top: 1.2rem;
    padding-top: 8.5rem;
    position: relative;
  }

  .el-footer::after {
    background: url("../images/background-desktop-footer.52f7b479f878.avif") no-repeat 0 0;
    content: "";
    transform: rotate(180deg);
    background-size: contain;
    position: absolute;
    height: 13.5rem;
    top: -8.8rem;
    left: 0;
    width: 100%;
  }

  .base-form {
    padding-top: 10.5rem;
    padding-bottom: 11.5rem;
  }

  #spanLinea::before {
    background: url("../images/lineDesktop.cf4c8c40f075.svg") no-repeat 0 0;
    content: "";
      height: 3rem;
      position: absolute;
      left: 11.2rem;
      width: 224px;
  }
}

@media (min-width: 1200px) {
  .el-barra {
    height: 14.4rem;
    padding-right: 2.5rem;
  }

  .el-footer::after{
    top: -7.6rem;
  }
  
  .el-header-directorio::after {
    height: 8.5rem;
    top: 19rem;
  }
}

@media (min-width: 1348px) {
  .el-barra {
    height: 15.3rem;
  }
}

@media (min-width: 1400px) {
  .el-header-directorio::after {
    top: 16.4rem;
  }
}

@media (min-width: 1600px) {
  .el-footer::after{
    top: -5.9rem;
  }

  #subtituloDirectorio {
    padding-top: 16.7rem;
  }

  .el-header-directorio::after {
    top: 18.4rem;
  }
}

@media (min-width: 1644px) {
  .el-barra {
    height: 15.9rem;
  }
}