:root {
  --color-azul: #2A7AE4;
  --color-blanco: #fff;
  --color-gris: #464646;
  --color-gris2: #a9a9a9;
  --color-gris3: #F5F5F5;
  --color-lupa: #A2A2A2;
  --color-rojo: #df2525;
  --fondo-azul: #EAF2FD;
  --fondo-gris: #E5E5E5;
  --fondo-azulado: #EAF2FD;

 --fuente-principal: 'Raleway', sans-serif;
 --fuente-secundaria: 'Bitter', serif;
}


* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
  font-family: var(--fuente-principal);  
}

img {  
  display: flex;
  object-fit: cover;
  object-position: center center;
}

a {
  display: block;
  text-decoration: none;
  color: inherit;
}

p {
  display: inline;
}

li {
  list-style-type: none;
}

table,tr,td {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6 {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

form,button,input,textarea,select,:focus {
  font-family: inherit;
  font-size: inherit;
  -webkit-hyphens: auto;
          hyphens: auto;
  background-color: transparent;
  display: flex;
  color: inherit;
  outline: none;
  resize: none;
}

body {
  font-size: 100%;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

label {
  color: var(--color-gris2);
}

::placeholder {
  color: var(--color-gris2);
}

.aviso,
.envio {
  min-width: 18rem;
  padding: 1rem;
  display: flex;
  gap: 8px;
  position: fixed;
  right: calc(50% - 142px);
  top: 1%;
  overflow: hidden;
  border-radius: 5px;
  border-left: 8px solid var(--color-azul);
  background-color: var(--fondo-azulado);
  z-index: 2;
  box-sizing: border-box;
}
.aviso.mostrar,
.envio.mostrar {
  animation:  ver_tarjeta 1.3s, ease forwards;
}
@keyframes ver_tarjeta {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(-10px);
  }
}

.aviso.ocultar,
.envio.ocultar {
  display: none;
}
.aviso__alerta {
  color: #205EB0;
  font-size: 20px;
}
.aviso__mensaje {
  font-size: 16px;
  font-weight: 700;
  color: #2A7AE4;
}

@media (min-width: 767px) {  

  .aviso__mensaje {    
    font-size: 18px;
  }
}