.mid-portada {
  min-height : 100vh;
  position   : relative;
}



.mid-portada .box {
  background-color : var(--color-gris-oscuro-75);
  border-radius    : 20px;
  padding          : .8em 1em;
  text-align       : left;
  color            : #FFF;
  width            : 100%;
  display          : block;
  font-size        : 1em;
  font-weight      : normal;
  transition       : .5s;
  backdrop-filter  : blur(3px);
}

.mid-portada .box i {
  float       : right;
  font-weight : normal;
  transition  : .5s;
  position    : relative;
  top         : 4px;
}

.mid-portada .box:hover {
  background-color : var(--color-gris-oscuro);
  transition       : .5s;
}

.mid-portada .box:hover i {
  padding-right : 1em;
  transition    : .5s;
}

.mid-portada .box.boxGrande {
  text-align  : center;
  font-weight : normal;
  font-size   : 1.2em;
}

.mid-portada .box.boxGrande :is(img,i) {
  float         : none;
  font-weight   : normal;
  transition    : .5s;
  font-size     : 1em;
  margin-bottom : 20px;
}

.mid-portada .box.boxGrande:hover :is(img,i) {
  /*! padding-right : 0; */
  /*! margin-bottom : 10px; */
  transition    : .5s;
}
@media(min-width:576px){}
@media(min-width:768px){
  .portada-init .background-wrapper {
   background-position:top right;

  }
}

@media (min-width : 991px) {
  .mid-portada .box {
    padding     : 1.2em 1em;
    font-size   : 1.1em;
    font-weight : bold;
  }

  .mid-portada .box.boxGrande {
    font-size : 1.5em;
  }

  .mid-portada .box.boxGrande :is(i,img) {
    font-size : 2em;
  }

  .rastreo-opened .col-6.cont-btnRastrearEnvio {
    animation                 : open-rastrear-envio;
    animation-duration        : .5s;
    animation-iteration-count : 1;
    transform-origin          : top left;
    animation-direction       : normal;
    animation-fill-mode       : forwards;
  }

  .rastreo-opened .col-12.cont-rastrear {
    animation                 : open-cont-rastrear;
    animation-duration        : .5s;
    animation-delay           : .5s;
    animation-iteration-count : 1;
    animation-direction       : normal;
    animation-fill-mode       : forwards;
  }
}

.rastreo-opened .cont-btnHacerEnvio {
  animation                 : close-hacer-envio;
  animation-duration        : .5s;
  animation-iteration-count : 1;
  transform-origin          : top left;
  overflow                  : hidden;
  white-space               : nowrap;
  animation-direction       : normal;
  animation-fill-mode       : forwards;
}

.rastreo-opened .cont-btnRastrearEnvio {
  animation                 : open-rastrear-envio-mobile;
  animation-duration        : .5s;
  animation-iteration-count : 1;
  transform-origin          : top left;
  animation-direction       : normal;
  animation-fill-mode       : forwards;
}

.cont-rastrear {
  width            : 0;
  transform-origin : top left;
  overflow         : hidden;
  white-space      : nowrap;
  opacity          : 0;
  padding          : 0;
}

.rastreo-opened .cont-rastrear {
  animation                 : open-cont-rastrear-mobile;
  animation-duration        : .5s;
  animation-delay           : .5s;
  animation-iteration-count : 1;
  animation-direction       : normal;
  animation-fill-mode       : forwards;
}

.rastreo-opened {
}

.form-rastrear .form-control {
  background-color : transparent;
  border-color     : #4242E3;
  color            : #FFF;
}

@keyframes close-hacer-envio {
  from {
    width   : 25%;
    opacity : 1;
  }
  to {
    width   : 0%;
    opacity : 0;
    padding : 0;
  }
}

@keyframes open-cont-rastrear {
  from {
    width   : 0%;
    opacity : 0;
    padding : 0;
  }
  to {
    width         : 25%;
    padding-right : calc(var(--bs-gutter-x) * .5);
    padding-left  : calc(var(--bs-gutter-x) * .5);
    opacity       : 1;
  }
}

@keyframes open-cont-rastrear-mobile {
  from {
    width   : 0%;
    opacity : 0;
    padding : 0;
  }
  to {
    width         : 100%;
    padding-right : calc(var(--bs-gutter-x) * .5);
    padding-left  : calc(var(--bs-gutter-x) * .5);
    opacity       : 1;
  }
}

@keyframes open-rastrear-envio {
  from {
    width : 25%;
  }
  to {
    width         : 25%;
    padding-right : 0;
  }
}

@keyframes open-rastrear-envio-mobile {
  from {
    width : 25%;
  }
  to {
    width   : 0%;
    padding : 0;
    opacity : 0;
  }
}

.mid-portada {
  min-height : 100vh;
  position   : relative;
}

.portada-init .background-wrapper {
  background-image : url(/imagenes/dac/home3-mobile.jpg);
  
}
@media(min-width:768px) {
  .portada-init .background-wrapper {
    background-image : url(/imagenes/dac/home3.jpg);
  }
}

.mid-portada .box {
  background-color : var(--color-gris-oscuro-75);
  border-radius    : 20px;
  padding          : .8em 1em;
  text-align       : left;
  color            : #FFF;
  width            : 100%;
  display          : block;
  font-size        : 1em;
  font-weight      : normal;
  transition       : .5s;
  backdrop-filter  : blur(4px);
  box-shadow       : 1px 1px 5px #000;
}

.mid-portada .box i {
  float       : right;
  font-weight : normal;
  transition  : .5s;
  position    : relative;
  top         : 4px;
}

.mid-portada .box:hover {
  background-color : var(--color-gris-oscuro);
  transition       : .5s;
}

.mid-portada .box:hover i {
  padding-right : 1em;
  transition    : .5s;
}

.mid-portada .box.boxGrande {
  text-align  : center;
  font-weight : normal;
  font-size   : 1.2em;
}

.mid-portada .box.boxGrande :is(img,i) {
  float         : none;
  font-weight   : normal;
  transition    : .5s;
  font-size     : 1em;
  margin-bottom : 20px;
}

.mid-portada .box.boxGrande:hover :is(img,i) {
  /*! padding-right : 0; */
  /*! margin-bottom : 10px; */
  transition    : .5s;
}

@media (min-width : 991px) {
  .mid-portada .box {
    padding     : 1.2em 1em;
    font-size   : 1.1em;
    font-weight : bold;
  }

  .mid-portada .box.boxGrande {
    font-size : 1.5em;
  }

  .mid-portada .box.boxGrande :is(i,img) {
    font-size : 2em;
  }

  .rastreo-opened .col-6.cont-btnRastrearEnvio {
    animation                 : open-rastrear-envio;
    animation-duration        : .5s;
    animation-iteration-count : 1;
    transform-origin          : top left;
    animation-direction       : normal;
    animation-fill-mode       : forwards;
  }

  .rastreo-opened .col-12.cont-rastrear {
    animation                 : open-cont-rastrear;
    animation-duration        : .5s;
    animation-delay           : .5s;
    animation-iteration-count : 1;
    animation-direction       : normal;
    animation-fill-mode       : forwards;
  }
}

.rastreo-opened .cont-btnHacerEnvio {
  animation                 : close-hacer-envio;
  animation-duration        : .5s;
  animation-iteration-count : 1;
  transform-origin          : top left;
  overflow                  : hidden;
  white-space               : nowrap;
  animation-direction       : normal;
  animation-fill-mode       : forwards;
}

.rastreo-opened .cont-btnRastrearEnvio {
  animation                 : open-rastrear-envio-mobile;
  animation-duration        : .5s;
  animation-iteration-count : 1;
  transform-origin          : top left;
  animation-direction       : normal;
  animation-fill-mode       : forwards;
}

.cont-rastrear {
  width            : 0;
  transform-origin : top left;
  overflow         : hidden;
  white-space      : nowrap;
  opacity          : 0;
  padding          : 0;
}

.rastreo-opened .cont-rastrear {
  animation                 : open-cont-rastrear-mobile;
  animation-duration        : .5s;
  animation-delay           : .5s;
  animation-iteration-count : 1;
  animation-direction       : normal;
  animation-fill-mode       : forwards;
}

.rastreo-opened {
}

.form-rastrear .form-control {
  background-color : transparent;
  border-color     : #4242E3;
  color            : #FFF;
}

@keyframes close-hacer-envio {
  from {
    width   : 25%;
    opacity : 1;
  }
  to {
    width   : 0%;
    opacity : 0;
    padding : 0;
  }
}

@keyframes open-cont-rastrear {
  from {
    width   : 0%;
    opacity : 0;
    padding : 0;
  }
  to {
    width         : 25%;
    padding-right : calc(var(--bs-gutter-x) * .5);
    padding-left  : calc(var(--bs-gutter-x) * .5);
    opacity       : 1;
  }
}

@keyframes open-cont-rastrear-mobile {
  from {
    width   : 0%;
    opacity : 0;
    padding : 0;
  }
  to {
    width         : 100%;
    padding-right : calc(var(--bs-gutter-x) * .5);
    padding-left  : calc(var(--bs-gutter-x) * .5);
    opacity       : 1;
  }
}

@keyframes open-rastrear-envio {
  from {
    width : 25%;
  }
  to {
    width         : 25%;
    padding-right : 0;
  }
}

@keyframes open-rastrear-envio-mobile {
  from {
    width : 25%;
  }
  to {
    width   : 0%;
    padding : 0;
    opacity : 0;
  }
}

.portada-init .background-wrapper > .bg {
  animation                 : portada-background;
  animation-duration        : 1s;
  animation-delay           : 0s;
  animation-iteration-count : 1;
  animation-direction       : normal;
  animation-fill-mode       : forwards;
  position                  : absolute;
  top                       : 0;
  left                      : 0;
  width                     : 100%;
  height                    : 100%;
  background-color          : #212121;
  backdrop-filter           : blur(10px);
}

@keyframes portada-background {
  from {
    opacity : 1;
  }
  to {
    opacity : 0;
  }
}